CODEWITHSUNDEEP
fluttertextfieldflutter-layout
long
long

Reputation: 397

How does flutter make textfield dynamically display multiple lines?

The effect I want to achieve is that the initial text field displays one line, and when the content exceeds one line, the text field displays two lines. The problem is that the baseline of the text field will move down, causing it to be obscured by the widget below. I want the baseline to remain in a row.

enter image description here

enter image description here

code:

return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 60.0
            ),
            child: TextField(
              maxLines: null,
              maxLengthEnforced: false,
              keyboardType: TextInputType.multiline,
            ),
          ),
          Container(height: 20.0,width: 200.0,color: Colors.red),
        ],
      )
    );

The expected effect should be:

One line of text effect:

Multi-line text effect:

Note that the baseline position has not moved down.

Upvotes: 1

Views: 6215

Answers (1)

user5593085
user5593085

Reputation:

Just set the maxLines property to null. The TextField Widget will automatically wrap the text, changing the number of lines dynamically.

Documentation

Upvotes: 15

Related Questions