Allow only two decimal number in flutter input?

Question

I want only two digits after the decimal point in the flutter input.User can't add more than two digits after the decimal point.

You can use TextEditingController to listen for the inputs and manage your logic there. — CopsOnRoad
– CopsOnRoad, Commented Jan 31, 2019 at 7:01
So there is no possiblity of inputformatter. Eg.inputFormatters: (keyboardType == TextInputType.number) ? [WhitelistingTextInputFormatter.digitsOnly] : [], — Hitesh Danidhariya
– Hitesh Danidhariya, Commented Jan 31, 2019 at 7:19
As far as I can say, no they won't help you, they can only give you options to choose specific type of keyboard. — CopsOnRoad
– CopsOnRoad, Commented Jan 31, 2019 at 7:21
Thanks you so much,don't know why this question got -2 points. — Hitesh Danidhariya
– Hitesh Danidhariya, Commented Jan 31, 2019 at 7:28
Probably because you didn't show any code you tried, and no one is going to write a solution for you from scratch. — CopsOnRoad
– CopsOnRoad, Commented Jan 31, 2019 at 7:54

Ajay · Accepted Answer · 2019-01-31 09:10:37Z

Here you go! Hope it helps :)

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'dart:math' as math;

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter"),
      ),
      body: Form(
        child: ListView(
          children: <Widget>[
            TextFormField(
              inputFormatters: [DecimalTextInputFormatter(decimalRange: 2)],
              keyboardType: TextInputType.numberWithOptions(decimal: true),
            )
          ],
        ),
      ),
    );
  }
}

class DecimalTextInputFormatter extends TextInputFormatter {
  DecimalTextInputFormatter({this.decimalRange})
      : assert(decimalRange == null || decimalRange > 0);

  final int decimalRange;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue, // unused.
    TextEditingValue newValue,
  ) {
    TextSelection newSelection = newValue.selection;
    String truncated = newValue.text;

    if (decimalRange != null) {
      String value = newValue.text;

      if (value.contains(".") &&
          value.substring(value.indexOf(".") + 1).length > decimalRange) {
        truncated = oldValue.text;
        newSelection = oldValue.selection;
      } else if (value == ".") {
        truncated = "0.";

        newSelection = newValue.selection.copyWith(
          baseOffset: math.min(truncated.length, truncated.length + 1),
          extentOffset: math.min(truncated.length, truncated.length + 1),
        );
      }

      return TextEditingValue(
        text: truncated,
        selection: newSelection,
        composing: TextRange.empty,
      );
    }
    return newValue;
  }
}

@AjayKumar the code 'math.min(truncated.length, truncated.length + 1)' looks quite redundant.
Problem with this is forcing a '.' doesn't support locales that swap periods and commas.
@AjayKumar Thanks, worked for me. On some keyboards it is necessary to click the point to add a minus. In this class, you can enter minus after entering all values. I will add if I check this out. Thanks again.
If user add more numbers after decimal points removing not work until reach to first two numbers.
Hey, this won't work if the device uses a Locale that uses the comma , as decimal separator, like in Spanish

theboringdeveloper · Accepted Answer · 2020-07-10 13:20:44Z

52

Here is a solution which works for me

TextFormField(
    inputFormatters: [
        WhitelistingTextInputFormatter(RegExp(r'^\d+\.?\d{0,2}')),
    ],
)

If you want to allow input like (.21) or (.25)

Here is a solution-

TextFormField(
    inputFormatters: [
        WhitelistingTextInputFormatter(RegExp(r'^(\d+)?\.?\d{0,2}')),
    ],
)

edited Jul 10, 2020 at 13:20

answered Jun 19, 2020 at 17:56

theboringdeveloper

1,49314 silver badges17 bronze badges

5 Comments

Nikssj_ Over a year ago

Your solution lets an user to input extra dots in the integer part

hemandroid Over a year ago

How to restrict the digits only for 4 before decimal @theboringdeveloper

joe_inz Over a year ago

Simplest solution, one thing to add, WhitelistingTextInputFormatter is deprecated use FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')) instead.

nck Over a year ago

This worked for me, note that services has to be imported with import 'package:flutter/services.dart';

Mark Amery Over a year ago

I'm not going to touch it since I'm not a Flutter user and can't conveniently test any code changes, but I suggest that someone edits this answer to note the refactoring of WhitelistingTextInputFormatter and BlacklistingTextInputFormatter into FilteringTextInputFormatter that @joe_inz mentions, stating in the answer for which Flutter versions you should use each. It doesn't look to me like any functionality changed - rather it appears the language change was for woke/BLM reasons following George Floyd's death.

Nuqo · Accepted Answer · 2020-11-21 20:37:32Z

33

after Flutter Version v1.20.0-1.0. use

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
  ],
),

answered Nov 21, 2020 at 20:37

Nuqo

4,1111 gold badge31 silver badges38 bronze badges

1 Comment

hemandroid Over a year ago

How to restrict the digits 4 digits between 0-9 before decimal @Nuqo

JT501 · Accepted Answer · 2021-03-29 16:41:24Z

25

For Dart 2.00+

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    // Allow Decimal Number With Precision of 2 Only
    FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}')),
  ],

It allows decimals like 1., .89, 8.99

answered Mar 29, 2021 at 16:41

JT501

1,74319 silver badges12 bronze badges

4 Comments

Dani Over a year ago

some languages use comma instead

kokemomuke Over a year ago

correct answer this one

Muheeb Mehraj Over a year ago

You can change the min and max number of decimal places by changing the number inside the parenthesis

Mário Meyrelles Over a year ago

I am removing commas like this, in conjunction with the other formatter:

TextInputFormatter.withFunction( (oldValue, newValue) => newValue.copyWith(text: newValue.text.replaceAll(',', '.'),                                    ),)

tvw · Accepted Answer · 2019-08-27 18:42:54Z

A shorter Version of DecimalTextInputFormatter using Regexp:

class DecimalTextInputFormatter extends TextInputFormatter {

  DecimalTextInputFormatter({int decimalRange, bool activatedNegativeValues})
  : assert(decimalRange == null || decimalRange >= 0,
    'DecimalTextInputFormatter declaretion error') {
    String dp = (decimalRange != null && decimalRange > 0) ? "([.][0-9]{0,$decimalRange}){0,1}" : "";
    String num = "[0-9]*$dp";

    if(activatedNegativeValues) {
      _exp = new RegExp("^((((-){0,1})|((-){0,1}[0-9]$num))){0,1}\$");
    }
    else {
      _exp = new RegExp("^($num){0,1}\$");
    }
  }

  RegExp _exp;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if(_exp.hasMatch(newValue.text)){
      return newValue;
    }
    return oldValue;
  }
}

Thanks, this code also ignores letters and symbols, leaving only digits and a dot.

tsitixe · Accepted Answer · 2021-11-09 16:52:44Z

Dart SDK version: 2.13.4 (stable) Flutter 2.2.3 • channel stable

i'm writing this answer on July 25, 2021, suggesting a little bit simpler solution, only using built-in TextField's inputFormatters.

i'm trying to ensure all of you, that the field won't accept floating point longer than 2(accepted: 12.25 vs notAccepted: 65.536). And also, it won't accept multiple dots, only accept a single dot(accepted: 12.25 vs notAccepted: 1.1.11, 1.11, .1.1, 1.1.1.1, whatsoever..).

The difference considering the other answers is that the code below won't accept .1 which is equal to 0.1 programmatically, which is actually way more user-friendly. And it is simple, nice to look at for us. You can just copy and paste the code below into inputFormatters: [].

If you want to accept both 0.1 and .1(not only 0.1), you can just comment out FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d*'))!

inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r'^(\d+)?\.?\d{0,2}')), FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d*')), ]

When you want to change the maximum decimal point, you can change the N value in the line below:

inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r'^(\d+)?\.?\d{0,N}')), FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d*')), ]

First example shows the case in which you want to limit decimal point to 2, and the N value exactly controls the limit. You might try within your own code [:

Appreciate all the other answers, hope this answer might help future wanderers! Have a wonderful day [:

Saurabh · Accepted Answer · 2020-11-18 15:21:49Z

5

May be this is a simpler solution

inputFormatters: [
            FilteringTextInputFormatter.allow(RegExp(r'(^\d*\.?\d{0,2})'))
          ]

answered Nov 18, 2020 at 15:21

Saurabh

911 silver badge4 bronze badges

2 Comments

Gianmarco Over a year ago

can you specify what's better regarding the other answer that use the regex?

Dani Over a year ago

some languages use comma instead

Large · Accepted Answer · 2023-05-23 20:06:21Z

5

If you are looking for a regexp to handle comma and dot with 2 decimals try this version:

TextFormField(
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: textFieldDecoration("Price with only 2 decimals and handling comma"),
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp(r'(^\d*[\.\,]?\d{0,2})')),
              ],
            );

answered May 23, 2023 at 20:06

Large

7577 silver badges21 bronze badges

1 Comment

ivan-capk-me Over a year ago

You can safely remove . and , escape. RegExp(r'(^\d*[.,]?\d{0,2})') instead of RegExp(r'(^\d*[\.\,]?\d{0,2})')

Thiago Cordeiro · Accepted Answer · 2020-04-17 19:59:50Z

Maybe a little late for you, but I also improved a little:

Allow only 1 .
Allow negative
Place negative sign on beginning

Hope it helps ;)

import 'package:flutter/services.dart';

class NumberTextInputFormatter extends TextInputFormatter {
  NumberTextInputFormatter({this.decimalRange}) : assert(decimalRange == null || decimalRange > 0);

  final int decimalRange;

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    TextEditingValue _newValue = this.sanitize(newValue);
    String text = _newValue.text;

    if (decimalRange == null) {
      return _newValue;
    }

    if (text == '.') {
      return TextEditingValue(
        text: '0.',
        selection: _newValue.selection.copyWith(baseOffset: 2, extentOffset: 2),
        composing: TextRange.empty,
      );
    }

    return this.isValid(text) ? _newValue : oldValue;
  }

  bool isValid(String text) {
    int dots = '.'.allMatches(text).length;

    if (dots == 0) {
      return true;
    }

    if (dots > 1) {
      return false;
    }

    return text.substring(text.indexOf('.') + 1).length <= decimalRange;
  }

  TextEditingValue sanitize(TextEditingValue value) {
    if (false == value.text.contains('-')) {
      return value;
    }

    String text = '-' + value.text.replaceAll('-', '');

    return TextEditingValue(text: text, selection: value.selection, composing: TextRange.empty);
  }
}

and (don't forget to import the previous class)

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class NumberFormField extends StatelessWidget {
  final InputDecoration decoration;
  final TextEditingController controller;
  final int decimalRange;

  const NumberFormField({Key key, this.decoration, this.controller, this.decimalRange}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: this.decoration,
      controller: this.controller,
      keyboardType: TextInputType.numberWithOptions(decimal: true),
      inputFormatters: [
        WhitelistingTextInputFormatter(RegExp(r'[\d+\-\.]')),
        NumberTextInputFormatter(decimalRange: this.decimalRange),
      ],
    );
  }
}

DomDunk · Accepted Answer · 2019-08-13 02:07:41Z

I extended the functionalities ... I hope you can find it useful. Tell me if you can improve even more please.

import 'package:flutter/services.dart';
import 'dart:math' as math;

class DecimalTextInputFormatter extends TextInputFormatter {
  DecimalTextInputFormatter({this.decimalRange, this.activatedNegativeValues})
      : assert(decimalRange == null || decimalRange >= 0,
            'DecimalTextInputFormatter declaretion error');

  final int decimalRange;
  final bool activatedNegativeValues;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue, // unused.
    TextEditingValue newValue,
  ) {
    TextSelection newSelection = newValue.selection;
    String truncated = newValue.text;


if (newValue.text.contains(' ')) {
  return oldValue;
}

if (newValue.text.isEmpty) {
  return newValue;
} else if (double.tryParse(newValue.text) == null &&
    !(newValue.text.length == 1 &&
        (activatedNegativeValues == true ||
            activatedNegativeValues == null) &&
        newValue.text == '-')) {
  return oldValue;
}

if (activatedNegativeValues == false &&
    double.tryParse(newValue.text) < 0) {
  return oldValue;
}

if (decimalRange != null) {
  String value = newValue.text;

  if (decimalRange == 0 && value.contains(".")) {
    truncated = oldValue.text;
    newSelection = oldValue.selection;
  }

  if (value.contains(".") &&
      value.substring(value.indexOf(".") + 1).length > decimalRange) {
    truncated = oldValue.text;
    newSelection = oldValue.selection;
  } else if (value == ".") {
    truncated = "0.";

    newSelection = newValue.selection.copyWith(
      baseOffset: math.min(truncated.length, truncated.length + 1),
      extentOffset: math.min(truncated.length, truncated.length + 1),
    );
  }

  return TextEditingValue(
    text: truncated,
    selection: newSelection,
    composing: TextRange.empty,
  );
}
return newValue;
}
}

the solutions here are pretty good. i think that it would make it even better if the comma is included when formatting in the thousands.
Hi Sir! Its possible to add a Number format to your code with decimalRange max 2? I want to achieve this: "100.25" "1,000.25" "10,000.25"

Rakesh Verma · Accepted Answer · 2020-01-22 02:26:20Z

The answer by @AjayKumar allows to limit text input to required decimal places.But my requirement was to avoid another character from keyboard except the number and a dot.So, I updated @AjayKumar's above answer

import 'package:flutter/services.dart';
import 'dart:math' as math;   

class DecimalTextInputFormatter extends TextInputFormatter {
DecimalTextInputFormatter({this.decimalRange})
  : assert(decimalRange == null || decimalRange > 0);

final int decimalRange;

@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue, // unused.
TextEditingValue newValue,
) {
TextSelection newSelection = newValue.selection;
String truncated = newValue.text;

if (decimalRange != null) {
  String value = newValue.text;

  if (value.contains(',') ||
      value.contains('-') ||
      value.contains(' ') ||
      value.contains('..')) {
    truncated = oldValue.text;
    newSelection = oldValue.selection;
  } else if (value.contains(".") &&
      value.substring(value.indexOf(".") + 1).length > decimalRange) {
    truncated = oldValue.text;
    newSelection = oldValue.selection;
  } else if (value == ".") {
    truncated = "0.";

    newSelection = newValue.selection.copyWith(
      baseOffset: math.min(truncated.length, truncated.length + 1),
      extentOffset: math.min(truncated.length, truncated.length + 1),
    );
  }

  return TextEditingValue(
    text: truncated,
    selection: newSelection,
    composing: TextRange.empty,
  );
}
return newValue;

} }

DomDunk · Accepted Answer · 2020-06-17 04:01:44Z

And avoiding non necessary zeros... Please debug this code.

import 'dart:math' as math;

import 'package:flutter/services.dart';

class DecimalTextInputFormatter extends TextInputFormatter {
  DecimalTextInputFormatter({this.decimalRange, this.activatedNegativeValues})
      : assert(decimalRange == null || decimalRange >= 0,
            'DecimalTextInputFormatter declaretion error');

  final int decimalRange;
  final bool activatedNegativeValues;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue, // unused.
    TextEditingValue newValue,
  ) {
    TextSelection newSelection = newValue.selection;
    String truncated = newValue.text;

    if (newValue.text.contains(' ')) {
      return oldValue;
    }

    if (newValue.text.isEmpty) {
      return newValue;
    } else if (double.tryParse(newValue.text) == null &&
        !(newValue.text.length == 1 &&
            (activatedNegativeValues == true ||
                activatedNegativeValues == null) &&
            newValue.text == '-')) {
      return oldValue;
    }

    if (activatedNegativeValues == false &&
        double.tryParse(newValue.text) < 0) {
      return oldValue;
    }

    if ((double.tryParse(oldValue.text) == 0 && !newValue.text.contains('.'))) {
      if (newValue.text.length >= oldValue.text.length) {
        return oldValue;
      }
    }

    if (decimalRange != null) {
      String value = newValue.text;

      if (decimalRange == 0 && value.contains(".")) {
        truncated = oldValue.text;
        newSelection = oldValue.selection;
      }

      if (value.contains(".") &&
          value.substring(value.indexOf(".") + 1).length > decimalRange) {
        truncated = oldValue.text;
        newSelection = oldValue.selection;
      } else if (value == ".") {
        truncated = "0.";

        newSelection = newValue.selection.copyWith(
          baseOffset: math.min(truncated.length, truncated.length + 1),
          extentOffset: math.min(truncated.length, truncated.length + 1),
        );
      }

      return TextEditingValue(
        text: truncated,
        selection: newSelection,
        composing: TextRange.empty,
      );
    }
    return newValue;
  }
}

dinesh_ghadge · Accepted Answer · 2021-08-10 08:37:36Z

For TextFeild in Flutter with Before decimal & After decimal length validation class.

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'dart:math' as math;

class DecimalTextInputFormatter extends TextInputFormatter {
  DecimalTextInputFormatter({this.decimalRange,this.beforeDecimalRange})
      : assert(decimalRange == null || decimalRange > 0 || beforeDecimalRange == null || beforeDecimalRange > 0 );

  final int decimalRange;
  final int beforeDecimalRange;

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, // unused.
      TextEditingValue newValue,
      ) {
    TextSelection newSelection = newValue.selection;
    String truncated = newValue.text;

    String value;

    if(beforeDecimalRange != null){
      value = newValue.text;

      if(value.contains(".")){
        if(value.split(".")[0].length > beforeDecimalRange){
          truncated = oldValue.text;
          newSelection = oldValue.selection;
        }
      }else{
        if(value.length > beforeDecimalRange){
          truncated = oldValue.text;
          newSelection = oldValue.selection;
        }
      }
    }

    if (decimalRange != null) {
      value = newValue.text;

      if (value.contains(".") &&
          value.substring(value.indexOf(".") + 1).length > decimalRange) {
        truncated = oldValue.text;
        newSelection = oldValue.selection;
      } else if (value == ".") {
        truncated = "0.";

        newSelection = newValue.selection.copyWith(
          baseOffset: math.min(truncated.length, truncated.length + 1),
          extentOffset: math.min(truncated.length, truncated.length + 1),
        );
      }

      return TextEditingValue(
        text: truncated,
        selection: newSelection,
        composing: TextRange.empty,
      );
    }
    return newValue;
  }
}

In TextFeild , Ex. Before decimal 9 digit & after Decimal 2 digit allowed code below.

inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
                   DecimalTextInputFormatter(decimalRange: 2, beforeDecimalRange: 9)
                 ],
keyboardType: TextInputType.numberWithOptions(decimal: true),

Anand A Nair · Accepted Answer · 2022-02-10 02:29:57Z

This worked for me (Feb/2022)

Restricts the text to 2 decimal point and have only 1 '.' (period)

0 will be automatically added to the start of the number if user go and manually remove the digit before the '.'

PS: A Slight edit to the answer

TextFormField

TextFormField(
          autofocus: false,
          keyboardType: TextInputType.number,
          controller: controller,
          inputFormatters: [
            DecimalTextInputFormatter(decimalRange: 2),
          ],
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Please add amount.';
            }
            return null;
          },

DecimalTextInputFormatter

import 'package:flutter/services.dart';
import 'dart:math' as math;

class DecimalTextInputFormatter extends TextInputFormatter {
  DecimalTextInputFormatter({required this.decimalRange})
      : assert(decimalRange > 0);

  final int decimalRange;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    TextSelection newSelection = newValue.selection;
    String truncated = newValue.text;

    String value = newValue.text;

    if (value.contains(".") &&
        value.substring(value.indexOf(".") + 1).length > decimalRange) {
      truncated = oldValue.text;
      newSelection = oldValue.selection;
    } else if (value == ".") {
      truncated = "0.";

      newSelection = newValue.selection.copyWith(
        baseOffset: math.min(truncated.length, truncated.length + 1),
        extentOffset: math.min(truncated.length, truncated.length + 1),
      );
    } else if (value.contains(".")) {
      String tempValue = value.substring(value.indexOf(".") + 1);
      if (tempValue.contains(".")) {
        truncated = oldValue.text;
        newSelection = oldValue.selection;
      }
      if (value.indexOf(".") == 0) {
        truncated = "0" + truncated;
        newSelection = newValue.selection.copyWith(
          baseOffset: math.min(truncated.length, truncated.length + 1),
          extentOffset: math.min(truncated.length, truncated.length + 1),
        );
      }
    }
    if (value.contains(" ") || value.contains("-")) {
      truncated = oldValue.text;
      newSelection = oldValue.selection;
    }

    return TextEditingValue(
      text: truncated,
      selection: newSelection,
      composing: TextRange.empty,
    );
  }
}

Nandan Wewhare · Accepted Answer · 2023-08-02 03:05:26Z

0

 keyboardType: TextInputType.numberWithOptions(decimal: true),
 inputFormatters: [LengthLimitingTextInputFormatter(5)],

This works for me.

answered Aug 2, 2023 at 3:05

Nandan Wewhare

5256 silver badges12 bronze badges

Comments

Zeeshan Ahmad · Accepted Answer · 2021-02-18 03:19:56Z

-1

I think this is the most simplest and only way working for me:

inputFormatters: [ LengthLimitingTextInputFormatter(2), ]

answered Feb 18, 2021 at 3:19

Zeeshan Ahmad

6866 silver badges21 bronze badges

1 Comment

Abhimanyu Over a year ago

The question was to restrict user input of more than two "decimal digits". The given code restricts input of more than 2 characters. Totally different things.

Collectives™ on Stack Overflow

Allow only two decimal number in flutter input?

16 Answers 16

6 Comments

5 Comments

after Flutter Version v1.20.0-1.0. use

1 Comment

4 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

6 Comments

5 Comments

after Flutter Version v1.20.0-1.0. use

1 Comment

4 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related