How to hide letter counter from the bottom of TextField in Flutter

Hello Guys How Are You all? hope you all are fine. Today I faced some issues with Textfield. Actually, My TextFormField counter cannot be hidden. Even when I want to remove.

I was Facing Above error. Actually I have PIN text input box that is made by TextField. So Here I Have found below solution that was worked for me. So Lets start without wasting your time.

How to hide letter counter from the bottom of TextField in Flutter?

Solution 1 : using maxLength and counterText 

This 1/1 is known for counter value and is feature of  TextField or TextFormField widget. To hide letter counter from the bottom of TextField in Flutter. you have to use maxLength. Same like below.

I have used counterText property with empty value inside of InputDecoration and then give maxLength . It is worked for me.

              child: TextField(
                  decoration: InputDecoration(
                    hintText: "PIN",
                    counterText: "",
                  ),
                  maxLength: 40,
                ),

Solution 2 : Using LengthLimitingTextInputFormatter

To prevent extra spaces below TextField and also avoid extra code to set a null widget then we must have to use LengthLimitingTextInputFormatter from package:flutter/services.dart. Lets See an example here.

                child: TextField(
                  decoration: InputDecoration(
                    hintText: "PIN",
                  ),
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(1),
                  ],
                )

Please import package:flutter/services.dart to use LengthLimitingTextInputFormatter Like Below.

import 'package:flutter/services.dart';

Solution 3 : Using InputDecoratoin

We can also use InputDecoration to hide letter counter from the bottom of TextField in Flutter.

                child: TextField(
                  decoration: InputDecoration(
                    hintText: "PIN",
                    counterStyle: TextStyle(
                      height: double.minPositive,
                    ),
                    counterText: "",
                  ),
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(1),
                  ],
                ),

Solution 4 : Using Offstage

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

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

Summery

So Guys Hope Above All Solution is Worked For You. Let me know in comment section. Hope this tutorial helped you a lot. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Also Check Out Below Tutorials

• How to create a modal bottomsheet in Flutter?
• How to Change Border Color of ElevatedButton in Flutter
• Also Read How to show/hide password in TextFormField in flutter?
• How to upload images and file to a server in Flutter?
• How to make a TextField with HintText but no Underline in flutter