How to set width, height, and padding of TextField in Flutter

Hello Guys. How are you all? Hope you all are fine. In today’s tutorial we are going to learn How to set width, height, and padding of TextField in flutter? So without wasting your time let’s start this tutorial.

1. How to set width of TextField in Flutter
2. How to set height of TextField in Flutter
3. How to set padding of TextField in Flutter

How to set width of TextField in Flutter

You can set the width of a TextField exactly as you want by wrapping it inside a Container, a SizedBox, or a ContrainedBox widget.

set width with of TextField by SizedBox Example

Just give width to SizedBox and your TextField width will increase.

        child: SizedBox(
          width: 350,
          child: TextField(
            decoration: InputDecoration(
              hintText: 'This text field is 350 pixels wide',
            ),
          ),
        ),

set height with of TextField by Container Example

Just give width to Container and your TextField width will increase.

        child: Container(
          width: 350,
          child: TextField(
            decoration: InputDecoration(
              hintText: 'This text field is 350 pixels wide',
            ),
          ),
        ),

Output

Learn How to set height of TextField in Flutter

To Increase The height of a TextField depends on inner padding, font size, and line-height. The font size can be set by manipulating the fontSize property of the TextStyle class.

Example

          child: TextField(
            style: TextStyle(fontSize: 50, height: 1.5),
            decoration: InputDecoration(
              hintText: 'This text field is 350 pixels wide',
            ),
          ),

Output

How to set padding of TextField in Flutter

You can set the inner padding of a TextField by using the contentPadding property of the InputDecoration class.

Example

          child: TextField(
            decoration: InputDecoration(
              hintText: 'This text field is 350 pixels wide',
              contentPadding: EdgeInsets.symmetric(
                vertical: 40,
                horizontal: 20,
              ),
              border: OutlineInputBorder(),
            ),
          ),

Output

Faq

Summery

So, It’s All About How to set width, height, and padding of TextField in Flutter. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• flutter packages get failed depends on flutter_test any from sdk which requires SDK version <2.0.0, version solving failed
• The instance member ‘x’ can’t be accessed in an initializer.
• Error getting sensor data: DioError [DioErrorType.RESPONSE]: XMLHttpRequest error.
• LateInitializationError: Field ‘[email protected]’ has not been initialized
• Flutter problems: “Could not resolve all artifacts for configuration ‘:classpath’ ”