CODEWITHSUNDEEP
user-interfaceflutterdarttextfieldmaxlength
Riley Fitzpatrick
Riley Fitzpatrick

Reputation: 919

Flutter: How to move TextField characer counter?

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

Upvotes: 9

Views: 11755

Answers (2)

Piotr Maszota
Piotr Maszota

Reputation: 201

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

Upvotes: 20

H Zan
H Zan

Reputation: 387

  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

Upvotes: 3

Related Questions