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
Author by
Riley Fitzpatrick
Updated on December 14, 2022Comments
-
Riley Fitzpatrick over 1 year
The title sums up the question pretty well. I have a
TextField
with amaxLength: 250
and this is what it looks like: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)),