Search code examples
dartflutter

Flutter TextField with currency format

There's is some way to do a money format in a TextField to when the user going typing the value it going already formatting in real time?

formating while typing.

Like in the above image, while the user is typing the format goes updating the value formatted already.

Solution

  • An easy solution to set a custom money mask, is to use the flutter_masked_text package:

    1 - First of all, you need add this packege to your package's pubspec.yaml file:

    dependencies:
  flutter_masked_text: ^0.7.0

    2 - After that, install the package using the command line (as below), or use a graphic interface for it, if you are using the IntelliJ IDEA just click in the button "Packages get".

    flutter packages get

    3 - Now in your Dart code, import it...

    import 'package:flutter_masked_text/flutter_masked_text.dart';

    4 - Lastly, change your TextField controller code from "TextEditingController" to "MoneyMaskedTextController":

      //final lowPrice = TextEditingController(); //before
  final lowPrice = MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ','); //after