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.

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

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.

Question: How to hide letter counter from the bottom of TextField in Flutter ?
Answer: 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.

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

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 Read

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

Leave a Comment