3 Ways to Set Height and Width of TextField in Flutter [2023]

TextField is a widely used widget in Flutter. You may use it to create a simple form or just use it to allow users to enter a message in a chat app. It serves as the primary widget to get the user’s input. Sometimes you may need to change its height and width to match your design and provide a good user experience. So in this tutorial, we’ll learn how to set height and width of TextField in Flutter.

Here’s what we’ll try to achieve:

Here’s what we’ll cover:

• The Problem
• Changing TextField Height
  1. Changing Font Size
  2. Adding Content Padding
  3. Adding MaxLines and MinLines
• Changing TextField Width

The Problem

When you add the TextField to your page, the default height is set to allow only one line of text, and width is set as long as its parent allows. That means if you wrap the TextField inside the Column widget, TextField’s width is set to full width horizontally and height is set based on the font size (till one line). If the text entered is long enough, the width and height remain the same and TextField starts showing the new characters at the end of the TextField.

TextField Code:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    border: OutlineInputBorder(),
  ),
),

Output:

Changing TextField Height

TextField’s height can be changed in 3 ways that are based on your requirement. You can use the Font Size and Content Padding to increase the height and allow a single-line text or use the MaxLines-MinLines property to increase the overall height of the TextField as new text is entered.

Changing Font Size

If you want to allow only single-line text and change the TextField height, then simply changing the Font Size can help you.

To change the TextField height by changing the Font Size:

Step 1: Inside the TextField, Add the style parameter and assign the TextStyle().

Step 2: Inside the TextStyle(), Add the fontSize parameter and set the appropriate value.

Step 3: Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    border: OutlineInputBorder(),
  ),
  style: TextStyle(fontSize: 40), // <-- SEE HERE
)

Output:

Adding Content Padding

If you notice carefully in the above solution you will find that the size of the placeholder text also changed. i.e Enter Name. If you want to increase the height without changing the font size you can opt for adding Content Padding.

To change the TextField height by changing the Content Padding:

Step 1: Inside the TextField, Add the decoration parameter and assign the InputDecoration().

Step 2: Inside the InputDecoration(), Add the contentPadding parameter and assign the EdgeInsets.symmetric(vertical: 40).

Step 3: Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.symmetric(vertical: 40), // <-- SEE HERE
  ),
)

Output:

Adding MaxLines and MinLines

If you want to increase the height of the TextField when the long text is entered, you can use the MaxLines and MinLines property. 

Note: Setting the MinLines to 1 will show the TextField as regular and setting the MaxLines to 5 will increase the height till the fifth line of the TextField and setting it to null, will make the height grow infinitely.

To change the TextField height by adding the MaxLines and MinLines:

Step 1: Inside the TextField, Add the maxLines parameter and assign the value as 5.

Step 2: Inside the TextField, Add the minLines parameter and assign the value as 1.

Step 3: Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    border: OutlineInputBorder(),
  ),
  maxLines: 5, // <-- SEE HERE
  minLines: 1, // <-- SEE HERE
)

Output:

Changing TextField Width

To change the TextField width, you can simply wrap your TextField inside the SizedBox widget and give the appropriate width value.

Here’s how you do it:

Step 1: Wrap your TextField inside the SizedBox widget.

Step 2: Inside the SizedBox, Add the width parameter and assign the appropriate value.

Step 3: Run the app.

Code Example:

SizedBox( // <-- SEE HERE
  width: 200,
  child: TextField(
    decoration: InputDecoration(
      labelText: 'Enter Name',
      border: OutlineInputBorder(),
    ),
  ),
),

Output:

Conclusion

In this tutorial, we learned how to set height and width of TextField in Flutter. To change the height of the TextField we saw different approaches such as changing font size, adding content padding, and adding the maxLines and minLines property while keeping the same font size.

Would you like to check other interesting Flutter tutorials?