CODEWITHSUNDEEP
textfieldflutter
Anonk
Anonk

Reputation: 1653

How can I limit the length of a text field input in flutter?

The TextField widget doesn't seem to have a "limit" attribute to limit the number of characters that can be typed. How I can enforce that only a certain number of characters can be provided as input in a TextField Widget. I tried looking at the decoration property and potentially setting the limit there somehow but that didn't seem to work either. Is there a different widget I should be using?

Upvotes: 90

Views: 164515

Answers (9)

Hamza Ali
Hamza Ali

Reputation: 168

You can set LengthLimitingTextInputFormatter in input formatters

TextField(
   keyboardType: TextInputType.number,
   inputFormatters: [
     LengthLimitingTextInputFormatter(n,), //n is maximum number of characters you want in textfield
   ],
),

Upvotes: 7

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

There are two ways to do that

Solution One

LengthLimitingTextInputFormatter Creates a formatter that prevents the insertion of more characters than a limit.

      TextField(              
              inputFormatters: [
                new LengthLimitingTextInputFormatter(5), /// here char limit is 5
              ],
                ///....
              )

Solution Two:

          TextField(
                  maxLength: 5, /// here char limit is 5

If you don't want to show counter text at TextField bottom then add empty counterText in InputDecoration

Example:

TextField(
              maxLength: 100,
              decoration: InputDecoration(
                  counterText: '',
                  ///....

Upvotes: 5

Alpha BA
Alpha BA

Reputation: 311

With th version 1.25 this is even easier. The maxLengthEnforced property needs to be set to true. Otherwise the response above will not work.

     Container(
                  margin: EdgeInsets.only(right: 5),
                  child: SizedBox(
                    width: 70,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      maxLengthEnforced: true,
                      maxLength: 2,
                      decoration: InputDecoration(
                        labelText: 'Hours',
                        counterText: '',
                      ),
                      controller: hourField,
                    ),
                  ),
                ),

enter image description here

Upvotes: 7

Volodymyr Yatsykiv
Volodymyr Yatsykiv

Reputation: 3211

You can use this code snipped to limit length and hide counter:

TextFormField(
   maxLength: 10,
   buildCounter: (BuildContext context, { int currentLength, int maxLength, bool isFocused }) => null,
);

Original answer you can find here.

Upvotes: 2

UpaJah
UpaJah

Reputation: 7334

maxLength property is available in Flutter.

https://docs.flutter.io/flutter/material/TextField/maxLength.html

TextField(
  maxLength: 45,
)

Upvotes: 64

Sami Kanafani
Sami Kanafani

Reputation: 15741

You can use the maxLength property and you can still hide the bottom counter text by setting the counterText to empty string.

TextField(
  maxLength: 10,
  decoration: InputDecoration(
    counterText: ''
  ),
)

Upvotes: 127

RSproule
RSproule

Reputation: 184

You can control everything about the Text Field with the TextEditingController. So if you were to pair this information with an onChanged event from the TextField you could perform any logic you like in there. For example:

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChanged: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.text = text;
        }

    }
)

I am able to control the text field to stay within the guidelines because if it ever goes over it, it will revert to what it was before the last type.

Upvotes: 8

Shyju M
Shyju M

Reputation: 9933

Use inputFormatters property

example:

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(10),
      ]
    )

namespace

import 'package:flutter/services.dart';

Upvotes: 189

Anonk
Anonk

Reputation: 1653

I had to add an additional snippet to what RSproute mentioned. The full code is here: 

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it 
onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChange: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.value = new TextEditingValue(
                text: text,
                selection: new TextSelection(
                    baseOffset: maxLength,
                    extentOffset: maxLength,
                    affinity: TextAffinity.downstream,
                    isDirectional: false
                ),
                composing: new TextRange(
                    start: 0, end: maxLength
                )
            );
            _controller.text = text;
        } 
    }
);

Upvotes: 11

Related Questions