Flutter Money Formatting Example

In this article, we will discuss the Money Formatter widget in Flutter, which is a widget that allows developers to format currency values in a specific format.

Money Formatter Widget in Flutter

The Money Formatter widget in Flutter is a widget that allows developers to format currency values in a specific format. This widget is useful for developers who want to display currency values in a specific format, such as currency symbols, decimal separators, and thousands separators.

To use the Money Formatter widget in Flutter, you need to follow the following steps:

1. Import the intl package in your Flutter project. This package provides a set of internationalization and localization utilities, including the NumberFormat class that allows you to format currency values.

   import 'package:intl/intl.dart';

2. Create a NumberFormat object that represents the currency format you want to use. You can specify the currency symbol, decimal separator, and thousands separator in the constructor of the NumberFormat object.

   var formatter = NumberFormat.currency(
     locale: 'en_US',
     symbol: '\$',
     decimalDigits: 2,
   );

   In the example above, we are creating a NumberFormat object that represents the US dollar currency format. We are specifying the currency symbol as $ and the decimal digits as 2.

3. Use the format method of the NumberFormat object to format the currency value.

   var value = 1234.56;
   var formattedValue = formatter.format(value);
   print(formattedValue); // Output: $1,234.56

   In the example above, we are formatting the currency value 1234.56 using the format method of the NumberFormat object. The output of the format method is $1,234.56.

More Examples

In your typical app, money can be rendered as a decimal or integer. These types of data types do not allow special symbols like period and comma. However to make your app user friendly you need to show money in ways the user can easily read.

In this piece we look at examples of how to format and render money using several packages.

(a). flutter_money_formatter

A Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

Here is a demo of the example that will be created shortly:

Step 1: Install it

Start by installing this money formatter. You do that by adding it as a dependency in your pubspec.yaml file as follows:

dependencies:
  flutter_money_formatter: ^0.8.3

Then flutter pub get to fetch it or click the sync button in your editor(if it is present).

Step 2: Write Code

Next you need to import it:

import 'package:flutter_money_formatter/flutter_money_formatter.dart';

Once you've imported it instantiate the FlutterMoneyFormatter like below, passing in your double value:

FlutterMoneyFormatter fmf = FlutterMoneyFormatter(
    amount: 12345678.9012345
);

Well, then you can format your money as below:

// normal form
print(fmf.output.nonSymbol); // 12,345,678.90
print(fmf.output.symbolOnLeft); // $ 12,345,678.90
print(fmf.output.symbolOnRight); // 12,345,678.90 $
print(fmf.output.fractionDigitsOnly); // 90
print(fmf.output.withoutFractionDigits); // 12,345,678
// compact form
print(fmf.output.compactNonSymbol) // 12.3M
print(fmf.output.compactSymbolOnLeft) // $ 12.3M
print(fmf.output.compactSymbolOnRight) // 12.3M $

The above examples have been using the default configuration provided by the package. You can however also customize your configuration as follows:

FlutterMoneyFormatter fmf = new FlutterMoneyFormatter(
    amount: 12345678.9012345,
    settings: MoneyFormatterSettings(
        symbol: 'IDR',
        thousandSeparator: '.',
        decimalSeparator: ',',
        symbolAndNumberSeparator: ' ',
        fractionDigits: 3,
        compactFormatType: CompactFormatType.sort
    )
)

Full Example

Here is a full example. Start by creating your flutter project then install the library as has been discussed.

Then replace your main.dart with the following code:

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_money_formatter/flutter_money_formatter.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    TextStyle titleStyle =
        TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold);
    TextStyle subtitleStyle = TextStyle(fontSize: 20.0);
    FlutterMoneyFormatter fmf = FlutterMoneyFormatter(amount: 12345678.9012345);
    MoneyFormatterOutput fo = fmf.output;
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Money Formatter Demo'),
          ),
          body: SingleChildScrollView(
            child: ConstrainedBox(
                constraints: BoxConstraints(),
                child: Container(
                  padding: EdgeInsets.all(15.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      ListTile(
                        title: Text(
                          'FormattedNonSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fo.nonSymbol,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'FormattedLeftSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fo.symbolOnLeft,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'FormattedRightSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fo.symbolOnRight,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'FormattedWithoutDecimal :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fo.withoutFractionDigits,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'DecimalOnly :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fo.fractionDigitsOnly,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'FormattedNonSymbolCustom :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(amount: 123.4567, fractionDigits: 4)
                              .output
                              .nonSymbol,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'FormattedLeftSymbolCustom :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(
                                  symbol: 'IDR', symbolAndNumberSeparator: '-')
                              .output
                              .symbolOnLeft,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'CompactNonSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(amount: 12345678987654321.9012345)
                              .output
                              .compactNonSymbol,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'CompactLongNonSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(
                                  amount: 12345678987654321.9012345,
                                  compactFormatType: CompactFormatType.long)
                              .output
                              .compactNonSymbol,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'CompactLeftSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(amount: 1234.56789)
                              .output
                              .compactSymbolOnLeft,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'CompactRightSymbol :',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          fmf
                              .copyWith(
                                  amount: 123456.7890,
                                  compactFormatType: CompactFormatType.short)
                              .output
                              .compactSymbolOnRight,
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'Fast Calc',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          '${FlutterMoneyFormatter(amount: 12345.678).fastCalc(type: FastCalcType.addition, amount: 1.111).fastCalc(type: FastCalcType.substraction, amount: 2.222).output.nonSymbol}',
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'Fast Calc',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          '${fmf.fastCalc(type: FastCalcType.addition, amount: 1234.567).fastCalc(type: FastCalcType.substraction, amount: 234.5678).output.nonSymbol}',
                          style: subtitleStyle,
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'Compare IsEqual (=)',
                          style: titleStyle,
                        ),
                        subtitle: Text(
                          '${fmf.comparator.isEqual(5000)}',
                          style: subtitleStyle,
                        ),
                      )
                    ],
                  ),
                )),
          )),
    );
  }
}

Run

Then run the project.

Reference

Find download link below:

No.	Link
1.	Download code
2.	Read more
3.	Follow code autjor

Conclusion

In conclusion, the Money Formatter widget in Flutter is a useful widget that allows developers to format currency values in a specific format. By following the steps outlined in this article, you can easily use the NumberFormat class to format currency values in your Flutter app.