Flutter: Creating an Auto-Resize TextField

Last updated on December 28, 2021 A Goodman Loading... One comment

In Flutter, you can create an auto-resize as needed TextField (or TextFormField) in one of the following ways:

  • Set the maxlines argument to null. The textfield can expand forever if a lot of text is entered.
  • Set minLines to 1 and maxLines to N (a possitive integer). The textfield will auto expand or shrink based on the length of the entered text. It will stop expanding and start scrolling if it reaches N lines.

The example below will demonstrate the second approach.

Example Preview:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(30),
        child: Center(
          child: TextField(
            minLines: 1,
            maxLines: 10,
            style: TextStyle(fontSize: 20),
            decoration: InputDecoration(border: OutlineInputBorder()),
          ),
        ),
      ),
    );

Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Ahmet
Ahmet
4 days ago

“maxLines: null” it also happens with

You May Also Like