3 Ways to Create Multiline TextField in Flutter [2023 Code]

The TextField widget in Flutter is one of the most widely used and important widgets. It is used to accept the user input in varieties of scenarios. A common example is using it in a messaging app to allow users to send a message. But sometimes users may need to enter the long message and at the same time, they may also want to see the full message. This can be done by adding the multiline TextField. So in this tutorial, we’ll see the 3 ways to create multiline TextField in Flutter.

Here’s how it looks on Android, iOS, and the Web:

Here’s what we’ll cover:

• The Problem
• Ways to Create Multiline TextField in Flutter
  1. Using maxLines and minLines Properties
  2. Using Only maxLines Property
  3. Using expands Property

The Problem

When you add the TextField widget in your app and start typing a long message, you’ll notice that the old text of the message (starting text) starts to shift towards to left side and keeps on shifting as long as you enter the long message that doesn’t fit on a single line. This may frustrate users and can provide a bad user experience to users.

Ways to Create Multiline TextField in Flutter

The multiline TextField in Flutter can be created using the combination of minLines, maxLines, and expands property. You can use any of these approaches based on your requirement.

Using maxLines and minLines Properties

The maxLines and minLines properties can be used to make the TextField multiline. Initially, TextField height is displayed as per the specified minLines, and then the height increases till it reaches the line specified in the maxLines property and then provides the scrollbar after a message goes beyond maxLines.

Steps 

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.

Code Example

TextField(
  decoration: InputDecoration(labelText: 'Enter Message'),
  keyboardType: TextInputType.multiline,
  minLines: 1, // <-- SEE HERE
  maxLines: 5, // <-- SEE HERE
)

Output

Using Only maxLines Property

Sometimes you may want to allow TextField height to grow as long as its parent allows. You can do so by using the maxLines property.

Steps

Step 1: Inside the TextField, add the maxLines parameter and set it to null.

Step 2: Run the app.

Code Example

TextField(
  decoration: InputDecoration(labelText: 'Enter Message'),
  keyboardType: TextInputType.multiline,
  maxLines: null, // <-- SEE HERE
)

Output

Using expands Property

It is also possible that you may need to wrap your TextField widget inside the Expanded widget. But when you do so, you’ll notice that the TextField underline still shows under the 1st line. To show the underline on the last line, use the expands property.

Steps

Step 1: Inside the TextField, add the maxLines parameter and set it to null.

Step 2: Add the expands property and set it to true.

Step 3: Run the app.

Code Example

Container(
  height: 300,
  child: Column(
    children: [
      SizedBox(
        height: 10,
      ),
      Expanded(
        child: TextField(
          decoration: InputDecoration(labelText: 'Enter Message'),
          keyboardType: TextInputType.multiline,
          maxLines: null,
          expands: true, // <-- SEE HERE
        ),
      ),
      ElevatedButton(
        onPressed: () {},
        child: const Text(
          'Send',
          style: TextStyle(fontSize: 24),
        ),
      ),
    ],
  ),
)

 Output

Conclusion

In this tutorial, we learned how to create multiline TextField in Flutter using the top 3 ways. we first saw the problem associated with using a single line TextField and then saw all approaches to make TextField multiline. Basically, the Multiline TextField is created using the combination of maxLines, minLines, and expands property.

Would you like to check other interesting Flutter tutorials?