how to display no. of character user can type and how many characters user had typed in TextFormField Flutter

Viewed 238

How can we display the count of input characters entered by the user and how many characters user can type in that TEXTFORMFIELD in Flutter? Like this enter image description here

image credits : blog link

2 Answers

You can add maxLength property (it will show the writtenCharacters/totalLimit)

TextFormField(
  maxLength: 45,
)

Or you can also have alternative (it will not show the writtenCharacters/totalLimit), but for this you need to import

import 'package:flutter/services.dart';

TextFormField(
  inputFormatters: [
    LengthLimitingTextInputFormatter(45),
  ],
)

You can still use a TextField and achieve what a TextFormField do by saving the input of the TextField to a variable on text changed

TextField(
          maxLines: 3,
          maxLength: 30,
          onChanged: (value) {
             _content = value;
            },
          ),

and send _content on your form submit

With a TextFormField you can have the number of input character by passing an TextEditingController to the TextFormField

final _myTextEditingController = TextEditingController();

TextFormField(
                controller: _myTextEditingController,
                maxLength: 30
)

and show the number of character with

_myTextEditingController.text.length
Related