Home > Software engineering >  Change color of maxletters in textfiled flutter
Change color of maxletters in textfiled flutter

Time:12-19

enter image description here

How to change color of this? and position other place.( like center of top )

Code:

TextField(
      maxLength: 25,
      textAlign: TextAlign.center,
      obscureText: obscuretext,
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(8.0),
        border: InputBorder.none,
        iconColor: Colors.grey.shade800,
        hintText: hintText,
        hintStyle: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 16,
          color: Colors.grey.shade800,
        ),
        filled: true,
        fillColor: Colors.white54,
      ),
    );

CodePudding user response:

You can change the color of the max length indicator and the position by adding the following lines to the TextField:

buildCounter: (context,
      {required currentLength, required isFocused, maxLength}) {
    return Container(
      transform: Matrix4.translationValues(0, -kToolbarHeight, 0),
      alignment: Alignment.topCenter,
      child: Text(
        "$currentLength/$maxLength",
        style: TextStyle(color: Colors.green),
      ),
    );
  },

If you only want to change the color and not the position, you can add the following Code to the InputDecoration:

  counterStyle: TextStyle(
          color: Colors.green,
  ),

CodePudding user response:

you can build your custom counter

TextField(
  maxLength: 25,
  buildCounter: (_, {currentLength, maxLength, isFocused}) => Container(
        alignment: Alignment.centerLeft,
        child: Text(currentLength.toString()   "/"   maxLength.toString()),
  ),
)
  • Related