Flutter: How to move TextField characer counter?

5,316

Solution 1

You need to build and pass your own counter as a buildCounter parameter of a TextField Widget.

TextField(
  maxLength: 250,
  buildCounter: (_, {currentLength, maxLength, isFocused}) => Padding(
    padding: const EdgeInsets.only(left: 16.0),
    child: Container(
        alignment: Alignment.centerLeft,
        child: Text(currentLength.toString() + "/" + maxLength.toString())),
  ),
)

Solution 2

  child: new TextField(
                  style: BurmeseUtil.textStyle(context),
                  controller: txtController,
                  maxLength: 1500,
                  maxLines: null,
                  decoration: new InputDecoration(
                    counterText: '',
                    border: OutlineInputBorder(),
                  ),
                ),

Use decoration in TextField.Add counterText:' ' Good luck

Share:
5,316
Riley Fitzpatrick
Author by

Riley Fitzpatrick

Updated on December 14, 2022

Comments

  • Riley Fitzpatrick
    Riley Fitzpatrick over 1 year

    The title sums up the question pretty well. I have a TextField with a maxLength: 250 and this is what it looks like:

    enter image description here

    Is there a way to put the counter somewhere else? Optimally to the left of the send button, but otherwise maybe just above and on the left of the TextField. Any ideas? Thanks!

    Probably not necessary, but here's my code:

    TextField(
                  controller: inputTextEditingController,
                  focusNode: inputFocusNode,
                  style: TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, height: 0.8),
                  maxLength: 250,
                  maxLines: null,
                  decoration: InputDecoration(
                      contentPadding: const EdgeInsets.fromLTRB(20, 15, 0, 15),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(28)),
                      focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Platform.isAndroid ? Colors.green : Colors.blue),
                          borderRadius: BorderRadius.circular(28)),
                      suffixIcon: IconButton(
                        onPressed: _handleSubmitted,
                        icon: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
                          child: Icon(Icons.send,
                              color: inputFocusNode.hasFocus
                                  ? Platform.isAndroid ? Colors.green : Colors.blue
                                  : Colors.black54),
                        ),
                      ),
                      hintText: "Say something!",
                      hintStyle: inputFocusNode.hasFocus
                          ? TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, fontSize: 16)
                          : TextStyle(color: Colors.black54)),