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

textarea textfield flutter
Mary picture Mary · Oct 16, 2017 · Viewed 13.5k times · Source

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: enter image description here and expands as I type: enter image description here

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?

Answer

Hemanth Raj picture Hemanth Raj · Oct 16, 2017

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!

Related questions

How do you programmatically move the caret of a Flex TextArea to the end?

I'm trying to move the caret in a Flex TextArea to the end after appending some text from my code. I've looked through the reference documentation for TextArea and its underlying TextField but it appears there is no method provided …

Read More
Set value of textarea in jQuery

I am attempting to set a value in a textarea field using jquery with the following code: $("textarea#ExampleMessage").attr("value", result.exampleMessage); The issue is, once this code executes, it is not altering the text in the textarea? However …

Read More
How to add default value for html <textarea>?

I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I …

Read More