Restrict Special Character Input Flutter

Question

I have a TextField that will only take numbers as an input. The Keyboard that appears allows for the input of the the following characters: "-(hyphen) ,(comma) .(period) and space". How can I prevent the user from entering all except the period.

child: new TextField(
  controller: _controller,
  maxLengthEnforced: true,
  keyboardType: TextInputType.number,
  maxLength: 4, //9999 upper limit
  ), //TextField

I've tried to use RegExp to take the _controller text, remove the characters and place it back into to field without any luck.

...//Add Listener to _controller
_controller.addListener(restrictCharacters);
...

//Listener
void restrictCharacters(){
  RegExp regexp = new RegExp(
    r"^|\-|\,|\ ",
    caseSensitive: false,
    multiLine: false,);
  String text = _controller.text;
  String chng = text.replaceaLL(regExp,"");
  _controller.text = chng;
}

When applied the cursor moves to beginning and the field keeps the - (hyphen) for example.

score 80 · Answer 1 · edited Oct 24 '22 at 01:02

80

In your TextInputField(), use a FilteringTextInputFormatter like this:

TextField(
 inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.allow(RegExp("[0-9a-zA-Z]")),
  ], // Only numbers can be entered
),

Each character typed will be allowed only if it matches the RegExp. To include a space, use the regular expression "[0-9a-zA-Z ]" instead. Period means "any character" in regular expressions unless you escape them, like "[0-9\.a-zA-Z]".

.deny can be used in place of .allow to proved a blacklist instead of a whitelist.

edited Oct 24 '22 at 01:02

Michael Gundlach

106,555
11
37
41

answered Apr 12 '20 at 20:21

Siddy Hacks

1,846
14
15

How can i whitelist spaces also? – Rachit Rawat May 13 '20 at 22:59
3

By adding a space in the supplied regex, like this `"[a-zA-Z ]"` – Siddy Hacks May 16 '20 at 12:06
5

WhitelistingTextInputFormatter has been deprecated. For anyone reading this comment, use FilteringTextInputFormatter. – sarru1291 Nov 07 '20 at 14:49

score 18 · Answer 2 · edited Aug 01 '20 at 20:35

18

WhitelistingTextInputFormatter is deprecated. You should use FilteringTextInputFormatter.allow:

inputFormatters: [ FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")), ]

or FilteringTextInputFormatter.deny instead of BlacklistingTextInputFormatter

edited Aug 01 '20 at 20:35

David Buck

3,752
35
31
35

answered Aug 01 '20 at 19:59

Eduardo

475
4
9

Richard Heap · Answer 3 · 2018-05-22T19:41:38.943

11

Add a BlacklistingTextInputFormatter to your TextField.

  inputFormatters: [
    new BlacklistingTextInputFormatter(new RegExp('[\\.]')),
  ],

removes just . If you wanted to disallow, say, . and , change it to

  inputFormatters: [
    new BlacklistingTextInputFormatter(new RegExp('[\\.|\\,]')),
  ],

edited May 22 '18 at 19:41

answered May 21 '18 at 14:17

Richard Heap

48,344
9
130
112

Thanks [TextInputFormatter](https://docs.flutter.io/flutter/services/TextInputFormatter-class.html) inputFormatters: [BlacklistingTextInputFormatter(new RegExp(r'[-]|[ ]|[,]'))], – SupremeAbraxas May 21 '18 at 22:35
It seems that this not work as intended. [RegExp with multiple groups is not supported.](https://docs.flutter.io/flutter/services/WhitelistingTextInputFormatter/whitelistedPattern.html) – SupremeAbraxas May 22 '18 at 18:33
1

This is incorrect, you don't need to escape with backslashes. It should be `[.,]`. – Hasen Jul 20 '19 at 06:11

score 7 · Answer 4 · edited Jun 11 '20 at 21:10

7

Add this to your TextField for letters and numbers

inputFormatters: [new  WhitelistingTextInputFormatter(RegExp("[a-zA-Z0-9]")),],

edited Jun 11 '20 at 21:10

rhavelka

2,283
3
22
36

answered Jun 11 '20 at 17:49

Joseph Eduardo Mejia Laos

161
2
4

score 7 · Answer 5 · edited Oct 24 '22 at 01:03

7

If you want double to be added,you can also use the format like this:

inputFormatters: [FilteringTextInputFormatter.allow(RegExp("[0-9\.]")),],

Be sure to include the backslash, as a period on its own means "any character" (allowing everything).

edited Oct 24 '22 at 01:03

Michael Gundlach

106,555
11
37
41

answered Aug 26 '20 at 16:08

Haileapp

755
7
20

score 6 · Answer 6 · answered Feb 11 '21 at 19:43

6

Dart 2.13+, Flutter 1.27+

 inputFormatters:[FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9]'))]

answered Feb 11 '21 at 19:43

Kedar Sukerkar

1,410
1
16
22

Fellipe Sanches · Answer 7 · 2019-11-26T15:05:15.227

3

For those who need to work with money format in the text fields:

To use only: , (comma) and . (period)

and block the symbol: - (hyphen, minus or dash)

as well as the: ⌴ (blank space)

In your TextField, just set the following code:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[ -]'))],

The simbols hyphen and space will still appear in the keyboard, but will become blocked.

edited Nov 26 '19 at 15:05

answered Feb 15 '19 at 19:36

Fellipe Sanches

7,395
4
32
33

1

The regex string could simply be `[ -]`. The escapes are unnecessary, and you're additionally blacklisting the pipe character `|` (which surely isn't an issue but still) – Ricket Mar 17 '19 at 06:31
Right, you don't need the backslash escapes. – Hasen Jul 20 '19 at 06:12

score 1 · Answer 8 · edited Dec 28 '22 at 06:15

1

 inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.allow(RegExp("[0-9a-zA-Z]")),],

edited Dec 28 '22 at 06:15

Ravindra S. Patil

11,757
3
13
40

answered Oct 03 '22 at 11:32

muhammad kashan

61
3

score 0 · Answer 9 · answered Aug 10 '20 at 05:51

if you want to include English and Devanagari character also in your name then follow this regex pattern I have created this pattern for English letter and Devanagari letters with allow space

 inputFormatters: [ WhitelistingTextInputFormatter(RegExp("[a-zA-Z \u0900-\u097F]")),
                    LengthLimitingTextInputFormatter(30),
                  ],

score 0 · Answer 10 · edited Sep 22 '20 at 11:51

0

You can deny special characters with escape sequences or get any escape sequence from google which you want

Example:

inputFormatters: [
                    FilteringTextInputFormatter.deny(
                      RegExp("[a-zA-Z0-9\u0020-\u007E-\u0024-\u00A9]"),
                    ),
                    
                  ],

edited Sep 22 '20 at 11:51

iknow

8,358
12
41
68

answered Sep 22 '20 at 10:41

Faizan Ahmad

62
1
5

which part of this denies emojis? – GAGAN SINGH Jun 22 '21 at 10:10

score 0 · Answer 11 · answered Sep 12 '22 at 11:14

None of the above answers worked for me, This is how to use FilteringTextInputFormatter inside TextFormField:

TextFormField(
  inputFormatters: [
  FilteringTextInputFormatter(
  RegExp("[a-zA-Z]"),
  allow: true),
  ],)

Set allow to false if you want to deny the RegExp.

score 0 · Answer 12 · answered Sep 12 '22 at 11:23

0

Add this to your TextField for letters and numbers

inputFormatters: [WhitelistingTextInputFormatter(RegExp("[a-zA-Z0-9]")),],

answered Sep 12 '22 at 11:23

Sabahat Hussain Qureshi

1,176
3
14

score 0 · Answer 13 · answered Apr 28 '23 at 06:18

0

First you need to import "services" package.

 import 'package:flutter/services.dart';

Then you can use:

inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r"^|\-|\,|\ "))]

answered Apr 28 '23 at 06:18

jsonx

1,093
3
14
21

score 0 · Answer 14 · answered Aug 18 '23 at 10:23

Here is the solution I use. You can enter only numbers and only one dot. I think that this is the best solution for the number input field.

inputFormatters: [
      FilteringTextInputFormatter.allow(RegExp(r'[0-9.]')),
      SingleDotFormatter(),
],

class SingleDotFormatter extends TextInputFormatter {
bool hasDot = true;
@override
TextEditingValue formatEditUpdate(
  TextEditingValue oldValue, TextEditingValue newValue) {
if (hasDot && newValue.text.endsWith('.') && newValue.text.split('.').length > 2) {
  return oldValue;
}

if (!hasDot && newValue.text.endsWith('.')) {
  hasDot = true;
  return newValue;
}

if (hasDot && !newValue.text.contains('.')) {
  hasDot = false;
  return newValue;
}

return newValue;
}
}

score 0 · Answer 15 · answered Aug 18 '23 at 13:27

Try this

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r"[a-zA-Z0-9]+|\s")),
  ],
  decoration: InputDecoration( 
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),

FilteringTextInputFormatter.allow: This is an input formatter class provided by Flutter. It allows you to define a regular expression pattern to filter and restrict the input text. In your case, you are using a regular expression that matches alphanumeric characters (letters and digits) along with whitespace characters (\s).
RegExp(r"[a-zA-Z0-9]+|\s"): This is the regular expression pattern that defines what text is allowed to be entered in the text field. Breaking it down:

[a-zA-Z0-9]+: This part of the pattern matches one or more alphanumeric characters (letters or digits).
|: This is the OR operator in regular expressions.
\s: This part of the pattern matches whitespace characters, such as spaces.

Restrict Special Character Input Flutter

15 Answers15

Linked

Related