Reputation: 3504
I'm facing a small problem. As you can see, i have set maxLength 1 of TextField in Flutter, But i'm unable to hide bottom label of text counter.
Upvotes: 198
Views: 139202
Reputation: 1878
This is the proper approach, it will prevent extra space below the Text Field, and also avoid extra code to set a null widget.
You can use input formatters in TextField
The following is:
inputFormatters:[
LengthLimitingTextInputFormatter(1),
]
and also make sure to remove the maxLength
parameter as well, for this to work properly.
Thank You!
Upvotes: 183
Reputation: 119
Remove maxLength
and add inputFormatter
as shown below:
TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
),
Upvotes: 0
Reputation: 431
This alone solved my problem!
TextField(
decoration: InputDecoration(
labelText: "Table Number",
counterText: ""
)
Upvotes: 15
Reputation: 441
Add counterText: "", to InputDecoration
TextField(
decoration: InputDecoration(
counterText: "",
),
maxLength: 10,
),
Upvotes: 15
Reputation: 354
Container(
height: 48,
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
border: Border.all(
color: CustomColors.kToDark,
),
color: CustomColors.White,
borderRadius: BorderRadius.all(Radius.circular(8))),
child: TextFormField(
textAlign: TextAlign.left,
cursorColor: CustomColors.kToDark,
maxLength: 30,
controller: _titleController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
counterText: "",
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.all(0))),
),
Use counterText: "" inside InputDecoration()
Upvotes: 4
Reputation: 1444
For null-safety use this:
TextField(
maxLength: 10,
buildCounter: (BuildContext context, {int? currentLength, int? maxLength, bool? isFocused}) => null,
)
Upvotes: 11
Reputation: 17417
Not pretty but works by removing the counter:
TextFormField(
buildCounter: (
BuildContext context, {
required int currentLength,
int? maxLength,
required bool isFocused,
}) => null,
Upvotes: 2
Reputation: 1451
You can follow the below codes.
TextField(
controller: myController,
maxLength: 3,
buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}) =>null
)
Upvotes: 3
Reputation: 1951
As mentioned by @user10481267 in the best answer would be use buildCounter
property. This gives extreme flexibility and you can even decide dynamically to show the counter or not.
I was building a dynamic form with the required properties in JSON. My implementation is as follows:
TextFormField(
buildCounter: (BuildContext context,
{
int currentLength,
int maxLength,
bool isFocused}) {
if (isFocused)
return formFields[index]["max"] == null
? null
: Text(
'$currentLength / $maxLength',
semanticsLabel: 'character count',
);
else
return null;
},
maxLength: formFields[index]["max"] ?? 100,
decoration: new InputDecoration(
labelText: formFields[index]["hint"] ?? "",
fillColor: Colors.green,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(15.0),
borderSide: new BorderSide(),
),
)
)
Upvotes: 0
Reputation: 13633
To hide counter value from TextField or TextFormField widget while using maxLength
attribute, try following:
TextField(
decoration: InputDecoration(
hintText: "Email",
counterText: "",
),
maxLength: 40,
),
In this, I have set counterText
attribute inside InputDecoration
property with empty value. Hope it will help.
Upvotes: 389
Reputation: 21
In case you are still looking for the answer in 2020 here goes:
decoration: InputDecoration(
counter: Spacer(),
labelText: "National ID #",
border: InputBorder.none,
hintText: 'e.g 01-1234567A12',
hintStyle: TextStyle(color: Colors.grey)),
In the TextField, use a Spacer()
as counter... hope this helps, i dont know if it breaks anything else but mine works fine.
Upvotes: 2
Reputation: 8610
You can use input formatters in TextField setting a limit to input and this is the best approach if you just want to hide the counter making a input limit.
import 'package:flutter/services.dart';
inputFormatters:[
LengthLimitingTextInputFormatter(1),
]
Or you can customize the decoration making a counter = Container():
decoration: InputDecoration(
hintText: "Email",
counter: Container(),
),
You if prefer to customize the buildCounter, here is how to do it properly (you can also customise the font, color etc). When you text field loses the focus the counter limits will disappears. Or you can just set
TextField(
controller: _clienteTextEditingController,
maxLength: 50,
buildCounter: (BuildContext context,
{int currentLength, int maxLength, bool isFocused}) {
return isFocused
? Text(
'The Input Limits are: $currentLength/$maxLength ',
style: new TextStyle(
fontSize: 10.0,
),
semanticsLabel: 'Input constraints',
)
: null;
},
),
Upvotes: 6
Reputation: 41
you can use InputDecoratoin to hide the letter counter.
TextField(
keyboardType: TextInputType.number,
maxLength: 10,
decoration: InputDecoration(
**counterText:""**)
)
Upvotes: 4
Reputation: 925
Most of the answers seem to work. Another way would be to assign the counter with a shrink SizeBox.
TextField(decoration: InputDecoration(
hintText: "Email",
counter: SizedBox.shrink()
),
maxLength: 40,
),
Upvotes: 19
Reputation: 111
Simply set buildCounter to null.
It is a callback that generates a custom [InputDecorator.counter] widget
TextField(
maxLength: (some length),
buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}) => null,
);
Upvotes: 10
Reputation: 219
Whenever you don't need something in flutter just put an empty container!
TextField(
decoration: InputDecoration(
hintText: "Email",
counter: Container(),
),
maxLength: 20,
),
Upvotes: 10
Reputation: 159
Use a SizedBox with zero height and width:
TextField(
maxLength: 400,
decoration: InputDecoration(
counter: SizedBox(
width: 0,
height: 0,
),),)
Upvotes: 0
Reputation: 401
Simply set counter to Offstage() will do the trick.
TextField(
maxLines: 1,
decoration: InputDecoration(
counter: Offstage(),
),
),
Upvotes: 40
Reputation: 511
Another solution is to hide the counter widget by using SizedBox:
TextFormField(
...
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
counter: new SizedBox(
height: 0.0,
)),
...
)
Upvotes: 3
Reputation:
You can do:
TextField(
maxLength: 10,
buildCounter: (BuildContext context, { int currentLength, int maxLength, bool isFocused }) => null,
)
Upvotes: 27
Reputation: 3418
you can use InputDecoratoin to hide letter counter.
TextFormField(
decoration: InputDecoration(
labelText: "username",
counterStyle: TextStyle(height: double.minPositive,),
counterText: ""
)
Upvotes: 54
Reputation: 2744
You can hide the counter by adding counterText: ''
, inside the textfield decoration. It will simply display an empty String.
Upvotes: 43