How to Set Height And Width Of TextField In Flutter

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 the height and width of TextField in Flutter.

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: