close

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

How to set height of TextField in Flutter,

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,

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

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

Faq

  1. How to set width, height, and padding 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.
    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.
    You can set the inner padding of a TextField by using the contentPadding property of the InputDecoration class.

  2. set width, height, and padding 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.
    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.
    You can set the inner padding of a TextField by using the contentPadding property of the InputDecoration class.

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

Leave a Comment

%d bloggers like this: