money text form field
moneytextformfield is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.
this widget is based on the fluttermoneyformatter package which has a very powerful ability to do currency formatting.
install
for complete steps in installing moneytextformfield
you can see in the installation guide.
usage
the following is the simplest example of using moneytextformfield
:
import 'package:moneytextformfield/moneytextformfield.dart';
/// ... some lines of code ...
moneytextformfield(
settings: moneytextformfieldsettings()
)
/// ... some lines of code ...
for those who do not understand in implementing the code above, you can see the code below to create an application that can be directly used.
import 'package:flutter/material.dart';
import 'package:moneytextformfield/moneytextformfield.dart';
void main() => runapp(myapp());
class myapp extends statefulwidget {
@override
_myappstate createstate() => _myappstate();
}
class _myappstate extends state<myapp> {
texteditingcontroller mycontroller = texteditingcontroller();
@override
void initstate() {
super.initstate();
}
@override
widget build(buildcontext context) {
return materialapp(
home: scaffold(
appbar: appbar(
title: const text('moneytextformfield demo'),
),
floatingactionbutton: floatingactionbutton(
onpressed: () => print(mycontroller.text),
child: icon(icons.save),
),
body: column(
children: <widget>[
/// begin of :> moneytextformfield
moneytextformfield(
settings: moneytextformfieldsettings(
controller: mycontroller
)
)
/// end of :> moneytextformfield
]
)
)
);
}
}
from the above code it will look more or less like the following:
figure 1: using full format
by doing a little modification, you will get the following results:
figure 2: using compact format
referring to the example code above, to retrieve the value inputted by the user, you can get it through the mycontroller.text
as in the onpressed
event in the floatingactionbutton
widget.
configurations
for now, moneytextformfield
only uses one property to configure the display of that object, the settings
property that has a data type is an instance of moneytextformfieldsettings
.
moneytextformfieldsettings
name | data type | description |
---|---|---|
controller |
texteditingcontroller |
a controller for an editable text field. |
validator |
formfieldvalidator<string> |
an optional method that validates an input. returns an error string to display if the input is invalid, or null otherwise. |
inputformatters |
list<textinputformatter> |
a textinputformatter can be optionally injected to provide as-you-type validation and formatting of the text being edited. |
onchanged |
void |
an optional method that register a closure to be called when the object changes. |
moneyformatsettings |
moneyformatsettings |
see here |
appearancesettings |
appearancesettings |
see here |
enabled |
bool |
whether the form is able to receive user input. |
tips:
no need to initialize the value in
controller.text
, because the value will be ignored. thecontroller
property is only intended to capture the value inputted by the user.
notes:
the value contained in
controller.text
is exactly the same as the one inputted by the user and has astring
data type. if you want to get results in the same format, you can use thefluttermoneyformatter
package which is also used bymoneytextformfield
.
appearancesettings
name | data type | description |
---|---|---|
labeltext |
string |
text that describes the input field. default value is 'amount' |
hinttext |
string |
text that suggests what sort of input the field accepts. |
icon |
widget |
an icon to show before the input field and outside of the decoration’s container. |
labelstyle |
textstyle |
the style to use for the labeltext when the label is above (i.e., vertically adjacent to) the input field. |
inputstyle |
textstyle |
the style to use for the input field. |
formattedstyle |
textstyle |
the style to use for the formatted output text. |
errorstyle |
textstyle |
the style to use for the errortext |
padding |
edgeinsetgeometry |
the amount of space by which to inset the widget |
moneyformatsettings
name | data type | description |
---|---|---|
amount |
double |
decimal value that will be used when initializing the widget. default value is 0.00 . |
fractiondigits |
int |
the fraction digits that will be used on formatted output. default value is 2 . |
currencysymbol |
string |
the symbol that will be used on formatted output. default value is '$' (dollar sign). |
thousandseparator |
string |
the character that will be used as thousand separator on formatted output. default value is ',' (comma). |
decimalseparator |
string |
the character that will be used as decimal separator on formatted output. default value is '.' (dot). |
symbolandnumberseparator |
string |
the character that will be used as separator between symbol and number. default value is ' ' (space). |
displayformat |
moneydisplayformat |
see here |
moneydisplayformat
moneydisplayformat
is an enum object with values such as the following:
name | description |
---|---|
nonsymbol | used to display currency values in full format and without a currency symbol. |
symbolonleft | used to display currency values in full format with currency symbols on the left. |
symbolonright | used to display currency values in full format with currency symbols on the right. |
compactnonsymbol | used to display currency values in a short format and without a currency symbol. |
compactsymbolonleft | used to display currency values in a short format with a currency symbol on the left. |
compactsymbolonright | used to display currency values in a short format with a currency symbol on the right. |
Comments are closed.