How to limit number of characters in TextFormField?

Question

Is there a way in dart language to keep the maximum input length fixed in TextFormField?

score 85 · Accepted Answer · edited Mar 08 '18 at 08:53

85

Use inputFormatters property. The following code would limit the textFormField to 42 in length :

new TextFormField(
  inputFormatters: [
    new LengthLimitingTextInputFormatter(42),
  ],
);

UPDATE: Import the package first. import 'package:flutter/services.dart';

edited Mar 08 '18 at 08:53

Farwa

6,156
8
31
46

answered Mar 06 '18 at 08:36

Rémi Rousselet

256,336
79
519
432

It's not working. Shows undefined class error in `LengthLimitingTextInputFormatter` line – Farwa Mar 06 '18 at 08:54
1

The class has been in the framework for 4 months [here](https://github.com/flutter/flutter/blob/c02b6a8bcf174e5220259f839705afeace151e92/packages/flutter/lib/src/services/text_formatter.dart#L133) . If it doesn't works for you, try upgrading your flutter version. – Rémi Rousselet Mar 06 '18 at 09:19
4

You may also simply need `import 'package:flutter/services.dart';` – Rémi Rousselet Mar 06 '18 at 09:33
1

is there any difference between LengthLimitingTextInputFormatter(length) and maxlength ? Other than the counter? which of course can be shrunk by using counter: SizedBox.shrink(). – DroidDev Apr 28 '20 at 06:04

score 27 · Answer 2 · answered Aug 28 '18 at 06:43

27

use maxLength

TextFormField(
  controller: _deskripsiController,
  onFieldSubmitted: (String value){
        setState(() {
          _deskripsiController.text = value;
        });
  },
  decoration: const InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: "Deskripsi",
  ),
  maxLength: 8,
)

answered Aug 28 '18 at 06:43

Hanhan

1,309
12
19

LengthLimitingTextInputFormatter doesnt work. maxLength is the correct answer. – chitgoks Jun 13 '20 at 11:54
1

This is nicer than LengthLimitingTextInputFormatter because it shows also the progressive chars on the UI out of the box – Alessio Apr 02 '21 at 15:14

score 5 · Answer 3 · answered Oct 16 '19 at 07:47

5

best way is inputFormatters option:

inputFormatters: [
   new LengthLimitingTextInputFormatter(11),// for mobile 
],

answered Oct 16 '19 at 07:47

Mehrdad

1,477
15
17

LengthLimitingTextInputFormatter(9), works with flutter 3.0.5 after run it on mobile and macos emulator. – aminbadri7 Aug 20 '22 at 19:19

score 3 · Answer 4 · answered Dec 07 '19 at 21:00

Additionally to hahnsaja answer after you add maxLength - counter appears at the bottom of the TextFormField widget. To be able to hide it, add this to InputDecoration :

counterText: '',
counterStyle: TextStyle(fontSize: 0),

Example:

TextFormField(
  controller: _deskripsiController,
  onFieldSubmitted: (String value){
        setState(() {
          _deskripsiController.text = value;
        });
  },
  decoration: const InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: "Deskripsi",
        counterText: '',
        counterStyle: TextStyle(fontSize: 0),
  ),
  maxLength: 8,
)

Just setting the counterText to an empty string works - you don't need to set the fontSize to 0. — Paul Pritchard, Jul 16 '20 at 07:17

PK Chahar · Answer 5 · 2023-03-13T06:50:23.987

-1

try with the below code, here is one TextFormField where I'm taking a mobile number with max 10 digits

TextFormField(inputFormatters: [LengthLimitingTextInputFormatter(10)]) 
// replace your max length instead of 10

edited Mar 13 '23 at 06:50

answered Mar 10 '23 at 13:37

PK Chahar

81
2
10

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Mar 12 '23 at 10:29

How to limit number of characters in TextFormField?

5 Answers5