Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 745
Mary Avatar asked Oct 15 '17 23:10

Mary


People also ask

How do you create a multi line text field in flutter?

Step 1: Inside the TextField, add the minLines parameter and set it to 1. Step 2: Add one more parameter as maxLines and set it to 5. This will make sure that the TextField shows a full message till it reaches the 5th line. Step 3: Run the app.

How do you wrap a TextField flutter?

Here's how you wrap text on overflow in Flutter:Step 1: Make sure your Text widget is inside the Row widget. Step 2: Wrap your Text widget inside the Expanded widget. Step 3: Run your app.

How do I scroll a TextField in flutter?

We can make the text scrollable in flutter using these 2 widgets: Expanded Class: A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. SingleChildScrollView Class: A box in which a single widget can be scrolled.


1 Answers

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!

like image 106
Hemanth Raj Avatar answered Sep 19 '22 07:09

Hemanth Raj