DEV Community

Flutter: Formatting TextField with TextInputFormatter

rubensdemelo on January 11, 2019

A common task in mobile apps is formatting fields, like credit cards, phone numbers, zip code, etc. In Flutter, we achieve this using TextInputForm...
Read full post
Collapse
 
leonidasyopan profile image
Leonidas Yopan •

Sweet Rubens. What if we need a range, I don't want the user to input any value that exceeds a max value (example 0 - 100.0). Can I extend that and still allow the user to work with decimals? This is what I have thus far:

class CustomRangeTextInputFormatter extends TextInputFormatter {
  final double maxValue;

  CustomRangeTextInputFormatter({@required this.maxValue});

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (newValue.text == '')
      return TextEditingValue();
    else if (int.parse(newValue.text) < 0) return TextEditingValue().copyWith(text: '0');

    return int.parse(newValue.text) > maxValue ? TextEditingValue().copyWith(text: maxValue.toString()) : newValue;
  }
}
Enter fullscreen mode Exit fullscreen mode

But unfortunately it doesn't allow the user to use decimals. (Exemplo: 2.3, 10.7, 85.3, etc...)
Thanks.

Collapse
 
lonewolf17 profile image
Adeyanju Akorede •

I think that's because you are using int.parse() instead of double.parse()

At least that did it for me

Collapse
 
parsagachkar profile image
Parsa Gachkar •

The Example is not updating the text are you sure the code is working?

Collapse
 
saktouniliass profile image
saktoun-iliass •

Thnak you

Collapse
 
mohitkyadav profile image
Mohit Kumar Yadav •

@rubensdemelo I'm trying to build an input which accepts input in 'de' (German) locale. For example 6.5 is written 6,5 in de locale. Basically decimal point is (comma). What should I do?