Can I format a number before it is rendered in

Question

I am rendering a node in Flutter app something like:

We have total ${_summary[\'bookCount\']} books. 

_summ

Answer 1

There is a Flutter package that allows you to format text input with predefined patterns. First add the following line to the Dart dependencies: pubspec.yaml file:

    pattern_formatter: ^1.0.2```
then import it in your dart code
    import 'package:pattern_formatter/pattern_formatter.dart';

Example: Thousand group
    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      ThousandsFormatter()
    ],
   )

Decimal Number
    TextField(
     keyboardType: TextInputType.number,
     inputFormatters: [
     ThousandsFormatter(allowFraction: true)
  ],
 )

Card number grouping 

    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      CreditCardFormatter(),
    ],
   )

Date format

    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      DateInputFormatter(),
  ],
)

    

Answer 2

There is a Dart package for formatting numbers, the Dart intl package. To use the package, add the following line to the Dart dependencies: pubspec.yaml file:

  intl: ">=0.14.0"

Here's what my dependencies look like with the line:

dependencies:
  flutter:
    sdk: flutter

  intl: ">=0.14.0"

Click packages get in IntelliJ, or run flutter packages get from the command line.

Make sure your class imports the intl package:

import 'package:intl/intl.dart';

In your code, you can use NumberFormat class to do the formatting:

  final formatter = new NumberFormat("#,###");
  new Text(formatter.format(1234)), // formatted number will be: 1,234

Full stateful widget example:

class NumberFormatExample extends StatefulWidget {
  @override
  _NumberFormatExampleState createState() => new _NumberFormatExampleState();
}

class _NumberFormatExampleState extends State<NumberFormatExample> {
  final formatter = new NumberFormat("#,###");
  int theValue = 1234;

  @override
  Widget build(BuildContext context) {
    return new Text(formatter.format(theValue));
  }
}

Answer 3

In for loop you can try:

Text('Index ${i}'), //Index 0

Format with operation:

Text('Total: \$${price * quantity}'),  //$20

With Decimal point:

Text('\$${cart.totalAmount.toStringAsFixed(2)}'), //2.34

Answer 4

An update for above answers:

First add intl package into your pubspec.yaml file, just after flutter sdk (like below):

    dependencies:
      flutter:
        sdk: flutter
      intl: ^0.16.0

If you use flutter_localizations, intl must be above of that.

Now you can use NumberFormat class.

Some examples:

print(NumberFormat.currency().format(123456)); // USD123,456.00

print(NumberFormat.currency(locale: 'eu').format(123456)); // 123.456,00 EUR

print(NumberFormat.currency(name: 'EURO').format(123456)); // EURO123,456.00

print(NumberFormat.currency(locale: 'eu', symbol: '?').format(123456)); // 123.456,00 ?

print(NumberFormat.currency(locale: 'eu', decimalDigits: 3).format(123456)); // 123.456,000 EUR

print(NumberFormat.currency(locale: 'eu', customPattern: '\u00a4 #,##.#').format(123456)); // EUR 12.34.56,00

• Refrence & More information: https://www.woolha.com/tutorials/dart-formatting-currency-with-numberformat#supported-locales

• NumberFormat Class Dart API: https://api.flutter.dev/flutter/intl/NumberFormat-class.html