I have a textfield and need to have multi-line as below so that the text wraps, however it takes up the space of all the lines that is defined in maxLines. I want to be able to have it look like 1 line and expand as the text wraps. Any ideas of how to do this is flutter?
new TextField( decoration: const InputDecoration( hintText: 'Reply', labelText: 'Reply:', ), autofocus: false, focusNode: _focusnode, maxLines: 1, controller: _newreplycontroller, keyboardType: TextInputType.text, ),
In Flutter, you can create an auto-resize as needed TextField (or TextFormField) in one of the following ways: Set the maxlines argument to null. The textfield can expand forever if a lot of text is entered. Set minLines to 1 and maxLines to N (a possitive integer).
By default, a TextField is decorated with an underline. You can add a label, icon, inline hint text, and error text by supplying an InputDecoration as the decoration property of the TextField . To remove the decoration entirely (including the underline and the space reserved for the label), set the decoration to null.
TextField is a simple text field. (you don't care about user input) TextFormField is a text field to be used in a form (you care about user input). If you don't need to validate TextField . If you need to validate user input, use TextFormField with validator .
To hide counter value from TextField or TextFormField widget while using maxLength attribute, try following: TextField( decoration: InputDecoration( hintText: "Email", counterText: "", ), maxLength: 40, ), In this, I have set counterText attribute inside InputDecoration property with empty value. Hope it will help.
Set maxLines
to null and it will auto grow vertically.
It's documented (but not entirely clearly) here (edit: I've created a PR to update this, which I should've done to begin with for this question ;). To figure it out I ended up looking at the code for TextField
and its superclass(es), seeing what the behavior would be if set to null.
So your code should be as follows:
new TextField( decoration: const InputDecoration( hintText: 'Reply', labelText: 'Reply:', ), autofocus: false, focusNode: _focusnode, maxLines: null, controller: _newreplycontroller, keyboardType: TextInputType.text, ),
If you're trying to make it autogrow horizontally, you probably shouldn't - at least not based on the text content. But I'm asuming you want to make it autogrow vertically.
As shown in the first answer, setting maxLines to null will do the trick. However this would allow the textfield to grow infinitely.
To have more control, set minLines to 1 and maxLines as needed. Hope this helps!
Code Sample: TextField(minLines:1,maxLines:8)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With