How to update flutter TextField's height and width?

Question

How does one customise the TextField layout's height and width in Flutter?

Answer 1

To adjust the width, you could wrap your TextField with a Container widget, like so:

new Container(              
  width: 100.0,
  child: new TextField()
)

I'm not really sure what you're after when it comes to the height of the TextField but you could definitely have a look at the TextStyle widget, with which you can manipulate the fontSize and/or height

new Container(              
  width: 100.0,
  child: new TextField(                                 
    style: new TextStyle(
      fontSize: 40.0,
      height: 2.0,
      color: Colors.black                  
    )
  )
)

Bear in mind that the height in the TextStyle is a multiplier of the font size, as per comments on the property itself:

The height of this text span, as a multiple of the font size.

If applied to the root [TextSpan], this value sets the line height, which is the minimum distance between subsequent text baselines, as multiple of the font size.

Last but not least, you might want to have a look at the decoration property of you TextField, which gives you a lot of possibilities

EDIT: How to change the inner padding/margin of the TextField

You could play around with the InputDecoration and the decoration property of the TextField. For instance, you could do something like this:

new TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
    )
)

Answer 2

You can try margin property in the Container. Wrap the textfield inside a container and adjust the margin property.

                      new Container(
                      margin: const EdgeInsets.only(right: 10, left: 10),
                      child: new TextField(

                        decoration: new InputDecoration(
                            hintText: 'username',
                            icon: new Icon(Icons.person)),
                      )),

Answer 3

To set a base height, append "\n"s to your hintText.

This gives a base height and it grows. (workaround but useful)

TextField(
  decoration: InputDecoration(
    hintText: 'Tell your story\n\n\n\n\n',
  ),
  keyboardType: TextInputType.multiline,
  maxLines: null,
  controller: tec,
  //expands: true, // this needs LayoutBuilder SingleChildScrollView ConstrainedBox IntrinsicHeight Column and Expanded. i'm using only ListView.
),