Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)),
like image 886
Riley Fitzpatrick Avatar asked Jan 25 '23 19:01

Riley Fitzpatrick


2 Answers

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())),
  ),
)
like image 54
Piotr Maszota Avatar answered Feb 02 '23 20:02

Piotr Maszota


  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

like image 22
H Zan Avatar answered Feb 02 '23 21:02

H Zan