Blog

In your tpypical 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