Flutter textfield expand as user types

Question

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

Answer 1

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.

Answer 2

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)

Answer 3

Setting to null was working the same as setting to 1 (it grows horizontally just one line).

I think you have to set minLines and maxLines. I'm using minLines: 1 and maxLines: 2 and when the first line reaches the end it expands another line. When the second line reaches the end it scroll the second to the first and creates the third line. So you will have to set maxLenght too.

Answer 4

You can simply use this;

TextField get _text => TextField(
  maxLines: null,
  decoration: InputDecoration(
    constraints: BoxConstraints(
        maxHeight: responsiveHeight,
        maxWidth: responsiveWidth),
    contentPadding: EdgeInsets.symmetric(
        horizontal: responsiveHorizontalPadding,
        vertical: responsiveVerticalPadding),
    disabledBorder: InputBorder.none,
    border: InputBorder.none,
    enabledBorder: InputBorder.none,
    isDense: false,
  ));

Answer 5

@Rabi Roshan,

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!

Thank you so much!

I also prefer this version much more because it will only expand if the user inputs more than one line. And if it exceeds the maxLines, it will scroll vertically which is what should normally happen and what all big Chat Apps use.

Answer 6

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

Container(
            child: new TextField (
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 10,
              decoration: new InputDecoration(
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(10.0),
                    ),
                  ),
                  filled: true,
                  hintStyle: new TextStyle(color: Colors.grey[800]),
                  hintText: "Type in your text",
                  fillColor: Colors.white70),
            ),
            padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
          );

Answer 7

Using this should do the trick:

keyboardType: TextInputType.multiline,
minLines: 1,
maxLines: 20,
maxLength: 1000,

Adding the minLines and MaxLines is important in order to get the required behaviour, whereas maxLength is a treat!

Maybe too late, but better late than never!

Answer 8

The accepted answer works great for growing vertically. If you'd like the TextField to start small and expand horizontally as the user types, you can do the following:

IntrinsicWidth(
  child: TextField(...
),

In my case I wanted it centered on the screen (horizontally), so I did:

Center(
   child: IntrinsicWidth(
      child: TextField()
   )
)

Answer 9

If you want to set a predefined height, use expands: true :

SizedBox(
  height: 200,
  child: TextField(
    decoration: InputDecoration(hintText: 'Enter a message'),
    maxLines: null,
    expands: true,
  ),
)