Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter textfield expand as user types

Tags:

flutter

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,               ), 
like image 750
Robert Avatar asked Mar 05 '18 12:03

Robert


People also ask

How do you make an expandable TextField in Flutter?

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

How do you customize a TextField in Flutter?

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.

What is the difference between TextField and TextFormField in Flutter?

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 .

How do I get rid of maxLength in TextField Flutter?

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.


2 Answers

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.

like image 199
Dan Field Avatar answered Sep 17 '22 10:09

Dan Field


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)

like image 42
Rabi Roshan Avatar answered Sep 18 '22 10:09

Rabi Roshan