AVAILABLE: 5
To customize the width of a TextField
, you can wrap it with a Container
widget, like this:
Container(
width: 100.0,
child: TextField(),
)
As for the height of a TextField
, here's another approach using the TextStyle
widget. You might find this helpful, as it allows you to manipulate the fontSize
and/or the height:
Container(
width: 100.0,
child: TextField(
style: TextStyle(
fontSize: 40.0,
height: 2.0,
color: Colors.black,
),
),
)
Note that the height
property in TextStyle
is a multiplier of the font size, as described in the property's documentation:
The height of this text span, as a multiple of the font size.
When [height] is null or omitted, the line height will be determined by the font's metrics directly, which may differ from the fontSize. When [height] is non-null, the line height of the span of text will be a multiple of [fontSize] and be exactly fontSize height logical pixels tall.*
Lastly, but certainly not the least, you may want to explore the decoration
property of the TextField
. This property provides a variety of customization options:
TextField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 40.0),
),
)