moneytextformfield 0.0.3

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.

MoneyTextFormField

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.

Dependencies :

---

Install

For complete steps in installing MoneyTextFormField you can see in the Installation Guide.

Usage

Import the library in your dart file.

import 'package:moneytextformfield/moneytextformfield.dart';

Then put codes as in the following example:

TextEditingController mycontroller = TextEditingController();

...
... somelines of codes ...
...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MoneyTextFormField Demo'),
        ),
        body: Column(
          children: <Widget>[
            /// BEGIN OF MoneyTextFormField widget
            MoneyTextFormField(
              settings: MoneyTextFormFieldSettings(
                amount: 0.00,
                currencySymbol: '\$',
                decimalSeparator: '.',
                thousandSeparator: ',',
                fractionDigits: 2,
                spaceBetweenSymbolAndNumber: true,
                displayFormat: MoneyDisplayFormat.longLeftSymbol,

                labelText: 'Amount:',
                labelStyle: TextStyle(fontSize: 26.0),
                inputStyle: TextStyle(fontSize: 26.0),
                formatStyle: TextStyle(fontSize: 26.0, color: Colors.blue),

                controller: mycontroller
              )
            ),
            /// END OF MoneyTextFormField widget
          ],
        ),
      ),
    );
  }

...
... somelines of codes ...
...

From the above code it will look more or less like the following:

Figure 1: Using full format

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 object as follows:

print(mycontroller.text)

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'. Following are the properties owned by the MoneyTextFormFieldSettings` instance:

Name	Data Type	Description
amount	double	Used to provide the initial value to be used by the widget. The default value is 0.0.
currencySymbol	String	Used to replace the currency symbol that will be used. The default value is '$' (dollar sign).
decimalSeparator	String	Used to replace the separator character in fractions. The default value is '.' (dot).
thousandSeparator	String	Used to replace separating characters between thousands. The default value is ',' (comma).
fractionDigits	int	Used to set the number of fractional values to be displayed. The default value is `2'.
spaceBetweenSymbolAndNumber	bool	Used to ensure that currency symbols and values are separated by using space characters. The default value is true.
displayFormat	MoneyDisplayFormat	Used to set the type of format that will be displayed on the widget. The default value is MoneyDisplayFormat.longLeftSymbol. For more details, see here.
labelText	String	Use to replace the label that will be displayed on the widget. The default value is 'Amount'.
labelStyle	TextStyle	Used to change TextStyle for labelText. The default value is null.
inputStyle	TextStyle	Used to change TextStyle in the input area. The default value is null.
formatStyle	TextStyle	Used to change TextStyle in the formatted area. The default value is null.
controller	TextEditingController	Used to capture values inputted by the user.

Tips:: No need to initialize the value in controller.text, because the value will be ignored. the controller property is only intended to capture the value inputted by the user.

MoneyDisplayFormat

MoneyDisplayFormat is an enum object with values such as the following:

Name	Description
longNoSymbol	Used to display currency values in full format and without a currency symbol.
longLeftSymbol	Used to display currency values in full format with currency symbols on the left.
longRightSymbol	Used to display currency values in full format with currency symbols on the right.
compactNoSymbol	Used to display currency values in a short format and without a currency symbol.
compactLeftSymbol	Used to display currency values in a short format with a currency symbol on the left.
compactRightSymbol	Used to display currency values in a short format with a currency symbol on the right.

---

Demo

For more complete samples, you can grab it from the example directory.

Help Me

If you find an issue, bug, question, or want to request a new feature you can do it here. You can also help me to improve features or fix some issues by forking this project via Github

ChangeLog

Are you curious about the changes that occur in each version? See here for detailed informations.