Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter TextField with currency format

Tags:

flutter

dart

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.

[UPDATE]

I just found this library that makes it works like a charm: https://pub.dartlang.org/packages/flutter_masked_text

like image 488
Jorge Vieira Avatar asked May 17 '18 15:05

Jorge Vieira


1 Answers

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 
like image 86
Fellipe Sanches Avatar answered Sep 30 '22 08:09

Fellipe Sanches