Reputation: 3504

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

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

Answers (23)

Varun

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

Bhavesh Vaghasiya

Reputation: 119

Remove maxLength and add inputFormatter as shown below:

                TextField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                    ),

Upvotes: 0

Dangdat

Reputation: 431

This alone solved my problem!

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

Upvotes: 15

Brian Y.

Reputation: 41

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

Upvotes: 1

Sonu kumar

Reputation: 441

Add counterText: "", to InputDecoration

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

Upvotes: 15

Diksha Pruthi

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

aytunch

Reputation: 1444

For null-safety use this:

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

Upvotes: 11

Ced

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

Salim Murshed

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

Lakshman Pilaka

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

Rahul Sharma

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

JamalJamaica

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

Cassio Seffrin

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

Puneet kaushal

Reputation: 41

you can use InputDecoratoin to hide the letter counter.

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

Upvotes: 4

Kevin Nzioka

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

Terry

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

JIJO J

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

Hadi

Reputation: 159

Use a SizedBox with zero height and width:

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

Upvotes: 0

Yingkun

Reputation: 401

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

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

Upvotes: 40

Maybelle Pacate

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

user10481267

Reputation:

You can do:

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

Upvotes: 27

Mahdi Tohidloo

Reputation: 3418

you can use InputDecoratoin to hide letter counter.

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

Upvotes: 54

petras J

Reputation: 2744

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

Upvotes: 43

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

Answers (23)

Related Questions