How can I hide letter counter from bottom of TextField in Flutter

Question

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.

score 350 · Answer 1 · edited Dec 27 '20 at 17:46

350

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.

edited Dec 27 '20 at 17:46

John Alexander Betts

4,718
8
47
72

answered Nov 01 '18 at 08:38

Rahul Sharma

12,515
6
21
30

9

This is great if you just want to hide it, but it's still there and take up space often resulting in an uneven text box. Replacing maxLength with `TextField( inputFormatters: [LengthLimitingTextInputFormatter(mMaxLength)] )` Will solve it, but requires you to add an extra library to the file. – Joel Broström Feb 11 '19 at 12:58
1

this is working but `counterText` taking space height and affecting the UI – Farhana Naaz Ansari Feb 19 '19 at 07:33
18

for me doesn't keep the empty space, its being removed, running latest version of flutter helps? – voytez Oct 21 '19 at 14:09
@FarhanaNaazAnsari also set your helperText = ' ' . if it doesn't work wrap it with container – Pius T.K Jul 09 '21 at 17:53

score 162 · Answer 2 · edited Sep 01 '20 at 15:07

162

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),
    ]

Thank You!

edited Sep 01 '20 at 15:07

Cassio Seffrin

7,293
1
54
54

answered Aug 17 '18 at 12:55

Varun

1,658
1
7
11

8

It works, but requires you to import an extra library to the file: `import 'package:flutter/services.dart';` – Joel Broström Feb 11 '19 at 12:59
I used this method with `InputDecoration.collapsed`, but It's not working. However, user10481267's answer works. – Tokenyet Oct 10 '19 at 09:07
2

It might be obvious, but `maxLength` parameter must be removed for this to work properly. – flomaster Oct 15 '19 at 12:21

score 46 · Answer 3 · answered May 18 '19 at 05:19

46

you can use InputDecoratoin to hide letter counter.

TextFormField(
   decoration: InputDecoration(
     labelText: "username",
     counterStyle: TextStyle(height: double.minPositive,),
     counterText: ""
)

answered May 18 '19 at 05:19

Mahdi Tohidloo

2,968
1
17
17

Question is related to TextField, not TextFormField. Thanks for your suggestion in case of TextFormField. – Kamlesh Feb 05 '21 at 08:53
1

answer is TextField(decoration: InputDecoration(counterText: '',)) – Kamlesh Feb 05 '21 at 08:55

score 42 · Answer 4 · edited Dec 14 '18 at 05:52

42

You can hide the counter by adding counterText: '', inside the textfield decoration. It will simply display an empty String.

edited Dec 14 '18 at 05:52

Rahul Sharma

12,515
6
21
30

answered Oct 26 '18 at 11:34

petras J

2,538
3
16
23

2

IT still takes the counter space – user3808307 Jan 26 '21 at 20:27

score 35 · Answer 5 · answered Sep 26 '19 at 02:00

35

Simply set counter to Offstage() will do the trick.

TextField(
    maxLines: 1,
    decoration: InputDecoration(
      counter: Offstage(),
    ),
),

answered Sep 26 '19 at 02:00

Yingkun

351
3
3

1

This solution still affects the GUI (displaces the input text above the max length counter). The best solution (atleast for my use-case) was the ``counterText=""`` solution. – SilSur Jul 31 '22 at 10:04

score 22 · Answer 6 · answered May 21 '19 at 22:25

22

You can do:

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

answered May 21 '19 at 22:25

Kevin Nzioka · Answer 7 · 2020-02-23T18:21:15.977

17

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,
),

edited Feb 23 '20 at 18:21

answered Nov 12 '19 at 13:11

Kevin Nzioka

785
1
6
11

Works for me without having to import any new library! – blessing dickson Dec 11 '20 at 01:14
Did you add any value for the shrinked size box? – Kevin Nzioka Jul 16 '21 at 15:08

score 12 · Answer 8 · edited Sep 07 '22 at 05:11

12

Add counterText: "", to InputDecoration

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

edited Sep 07 '22 at 05:11

Suraj Rao

29,388
11
94
103

answered Jan 03 '22 at 20:59

Sonu kumar

351
3
7

score 10 · Answer 9 · edited Oct 24 '22 at 02:54

10

This alone solved my problem!

TextField(
   decoration: InputDecoration(
     labelText: "Table Number",
     counterText: ""
)

edited Oct 24 '22 at 02:54

TuGordoBello

4,350
9
52
78

answered Nov 14 '20 at 03:43

Dangdat

361
4
7

score 9 · Answer 10 · edited Jan 11 '20 at 04:47

9

Whenever you don't need something in flutter just put an empty container!

TextField(
  decoration: InputDecoration(
    hintText: "Email",
    counter: Container(),
  ),
  maxLength: 20,
),

edited Jan 11 '20 at 04:47

Boken

4,825
10
32
42

answered Nov 18 '19 at 18:01

JIJO J

169
3
7

this also hides validation error message, not good solution if you still need it – kashlo Jun 21 '20 at 13:03
Empty containers aren't recommended for use. Better to use the OffStage widget or a SizedBox. – Tonny Bawembye Jul 21 '21 at 17:51

score 9 · Answer 11 · answered Jan 17 '20 at 01:50

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,
);

score 7 · Answer 12 · answered Oct 26 '21 at 21:51

7

For null-safety use this:

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

answered Oct 26 '21 at 21:51

aytunch

1,326
1
16
31

1

This is the best answer IMO to remove the counter completely since setting the "counter" parameter in the InputDecoration to OffStage() or other zero space widget may hide the counter, but I have noticed that there is a 4 pixel height padding that remains - so this "buildCounter" method completely removes it. – Pip Apr 28 '22 at 20:09
1

I agree. This answer is the most flexible and isn't that too difficult to implement considering the added amount of control you now have. – enchance Oct 27 '22 at 06:56

Cassio Seffrin · Answer 13 · 2020-09-02T11:06:00.160

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;
          },
        ),

score 4 · Answer 14 · edited Aug 30 '20 at 17:10

4

you can use InputDecoratoin to hide the letter counter.

TextField(
            keyboardType: TextInputType.number,
            maxLength: 10,
            decoration: InputDecoration(
            **counterText:""**)
           )

edited Aug 30 '20 at 17:10

Arghya Sadhu

41,002
9
78
107

answered Aug 30 '20 at 16:43

Puneet kaushal

41
2

I think this one the the best answer – Adham Nov 10 '20 at 17:32

score 3 · Answer 15 · answered Jun 27 '19 at 08:53

3

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,
    )),
...
)

answered Jun 27 '19 at 08:53

Maybelle Pacate

481
7
5

Good solution but this https://stackoverflow.com/a/51895946/1599713 is better – Husam Dec 17 '19 at 16:30

score 3 · Answer 16 · answered Apr 26 '21 at 03:41

3

You can follow the below codes.

 TextField(
     controller: myController,
     maxLength: 3,
     buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}) =>null
    )

answered Apr 26 '21 at 03:41

Salim Murshed

1,423
1
8
19

score 3 · Answer 17 · answered Feb 07 '22 at 15:30

    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()

score 2 · Answer 18 · edited Oct 30 '20 at 11:10

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.

score 1 · Answer 19 · answered Jun 28 '21 at 21:58

1

Not pretty but works by removing the counter:

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

answered Jun 28 '21 at 21:58

Ced

15,847
14
87
146

score 1 · Answer 20 · answered Oct 21 '22 at 20:20

1

Use a SizedBox.shrink() for the counter widget in InputDecoration:

answered Oct 21 '22 at 20:20

Brian Y.

41
2

score 0 · Answer 21 · answered Jan 03 '20 at 17:13

0

Use a SizedBox with zero height and width:

TextField(
          maxLength: 400,
          decoration: InputDecoration(
            counter: SizedBox(
              width: 0,
              height: 0,
            ),),)

answered Jan 03 '20 at 17:13

Hadi

119
10

score 0 · Answer 22 · answered Apr 05 '21 at 00:39

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(),
                              ),
                            )
                          )

How can I hide letter counter from bottom of TextField in Flutter

22 Answers22

Linked

Related