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?
Add a comment |
9 Answers
Use inputFormatters property
example:
TextFormField( inputFormatters: [ LengthLimitingTextInputFormatter(10), ] ) namespace
import 'package:flutter/services.dart'; 
3 Comments
ArifMustafa
using
maxLength will give you length counter and increases the Field height, so this answer would be the accepted one, this one is working fine.
Mandeep Yadav
Thank You, It is working fine to me. I used this to restrict the length of AutocompleteTextField.
cmaxetom
Very easy solution. It works also with TextField(), not only TextFormField().
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: '' ), ) 
2 Comments
Parth Pitroda
maxLength: 10, its increase height of textfield
Apps 247
In the textfield's
decoration, set counter: Container() to avoid increasing heightmaxLength property is available in Flutter.
https://docs.flutter.io/flutter/material/TextField/maxLength.html
TextField( maxLength: 45, ) 6 Comments
10101010
The problem is it does add a counter text at the bottom.
UpaJah
Yeah, there is no option to remove the counter.
Shyju M
@10101010 use inputFormatters to remove the counter text
Bernardo Ferrari
decoration: InputDecoration(counter: SizedBox.shrink())
Rokit
Just use
counterText: "". It removes the counter and the space it takes up while counter: SizedBox.shrink() does not. See this answer: stackoverflow.com/a/53259386/996314 |
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; } } ); 
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.
You can set LengthLimitingTextInputFormatter in input formatters
TextField( keyboardType: TextInputType.number, inputFormatters: [ LengthLimitingTextInputFormatter(n,), //n is maximum number of characters you want in textfield ], ), 
Comments
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, ), ), ), 
Comments
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: '', ///.... 
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.
