Is there a way to dynamically change the Flutter TextField's maxLines?

Question

I have a TextField like this:

new Flexible(
    fit: FlexFit.loose,
    child: new Container(
        alignment: FractionalOffset.topLeft,
        child: new TextField(
            decoration: new InputDecoration(
                  hintText: 'Add a note',
            ),
            maxLines: 1,
            onChanged: (value) => _showSaveOptions(value),
        ),
    ),
),

I'd like to have my TextField to start out with maxLines set to 1, but as I type, I would like the maxLines to increase, so that all the text remains on the page and I don't have to scroll up. However, I also don't want to start off with maxLines set to say, 5 or 10, because the empty TextField takes up more space that necessary. An example of the behavior I want to implement is in the Long Answer Text option in Google Forms, where it starts with one line: and expands as I type:

I've considered setting maxLines to a counter that increments every time the user hits a newline, but how do I determine when the user has filled up a line?

Stockdale

Answer 1

Flutter was lagging multiline support in TextField. After an issue was raised regarding the same, the multiline feature has been added in the 0.0.16 release.

Make sure you upgrade flutter to the latest release. To get multiline TextField use:

new TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
) 

Hope this helped!

Slumberland

This is great, thanks! Turns out I can't set maxLines to null right now due to this issue, but I expect this to work once it is resolved. – Stockdale

this only looks like a text filed. not look like textarea. – Delrio

Answer 2

its look like a text-area. you can try with maxLines

maxLines: 8

TextField(
        maxLines: 8,
        decoration: InputDecoration(hintText: "Enter your text here", border: OutlineInputBorder(),
        labelText: 'Post Body'),
    ),

Delrio