How to change TextField's height and width?
FlutterFlutter LayoutTextfieldFlutter Problem Overview
How to customise TextField's width and height?
Flutter Solutions
Solution 1 - Flutter
To adjust the width, you could wrap your TextField with a Container widget, like so:
Container(
width: 100.0,
child: 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
Container(
width: 100.0,
child: TextField(
style: 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.
>
> 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.
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:
TextField(
decoration: const InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
)
Solution 2 - Flutter
I think you want to change the inner padding/margin of the TextField.
You can do that by adding isDense: true and contentPadding: EdgeInsets.all(8) properties as follow:
Container(
padding: EdgeInsets.all(12),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Default TextField',
),
),
SizedBox(height: 16,),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Densed TextField',
isDense: true, // Added this
),
),
SizedBox(height: 16,),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Even Densed TextFiled',
isDense: true, // Added this
contentPadding: EdgeInsets.all(8), // Added this
),
)
],
),
)
It will be displayed as:
Solution 3 - Flutter
Screenshot:
Widget _buildTextField() {
final maxLines = 5;
return Container(
margin: EdgeInsets.all(12),
height: maxLines * 24.0,
child: TextField(
maxLines: maxLines,
decoration: InputDecoration(
hintText: "Enter a message",
fillColor: Colors.grey[300],
filled: true,
),
),
);
}
Solution 4 - Flutter
This answer works, but it will have conflicts when the input field is in error state, for a better approach and a better control you can use this.
InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.all(9),
)
Solution 5 - Flutter
Wrap TextField in SizedBox for the width
SizedBox(
height: 40,
width: 150,
child: TextField(),
)
Solution 6 - Flutter
If you want to increase the height of TextFormField dynamically while typing the text in it. Set maxLines to null. Like
TextFormField(
onSaved: (newText) {
enteredTextEmail = newText;
},
obscureText: false,
keyboardType: TextInputType.emailAddress,
validator: validateName,
maxLines: null,
// style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
hintText: "Enter Question",
labelText: "Enter Question",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0))),
),
Solution 7 - Flutter
You can try the 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)),
)
),
Solution 8 - Flutter
simply wrap the TextField() in SizedBox() and give the height of the sized box
Solution 9 - Flutter
If you use "suffixIcon" to collapse the height of the TextField add: suffixIconConstraints
TextField(
style: TextStyle(fontSize: r * 1.8, color: Colors.black87),
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: r * 1.6, horizontal: r * 1.6),
suffixIcon: Icon(Icons.search, color: Colors.black54),
suffixIconConstraints: BoxConstraints(minWidth: 32, minHeight: 32),
),
)
Solution 10 - Flutter
use contentPadding, it will reduce the textbox or dropdown list height
InputDecorator(
decoration: InputDecoration(
errorStyle: TextStyle(
color: Colors.redAccent, fontSize: 16.0),
hintText: 'Please select expense',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(1.0),
),
contentPadding: EdgeInsets.all(8)),//Add this edge option
child: DropdownButton(
isExpanded: true,
isDense: true,
itemHeight: 50.0,
hint: Text(
'Please choose a location'), // Not necessary for Option 1
value: _selectedLocation,
onChanged: (newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: citys.map((location) {
return DropdownMenuItem(
child: new Text(location.name),
value: location.id,
);
}).toList(),
),
),
Solution 11 - Flutter
Set minLines: null, maxLines: null and expands:true to let the TextField fill the height of its parent widget:
Container(
child: TextField(
minLines: null,
maxLines: null,
expands: true
)
)
Refere to these docs for the same:https://api.flutter.dev/flutter/material/TextField/expands.html
And for width, you can do this:
Container(
width: 100,
child: TextField(
)
)
to let the TextField fill its parent widget's width(100 pixels in this case)
Solution 12 - Flutter
TextField( minLines: 1, maxLines: 5, maxLengthEnforced: true)
Solution 13 - Flutter
int numLines = 0;
Container(
height: numLines < 7 ? 148 * WidgetsConstant.height: numLines * WidgetsConstant.height * 24,
child: TextFormField(
controller: _bodyText,
maxLines: numLines < 7 ? 148 : numLines,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
onChanged: (String value) {
setState(() {
numLines = '\n'.allMatches(value).length + 1;
});
},
),
),
Solution 14 - Flutter
The perfect way to get rid of padding is to use InputDecoration.collapsed.
It wraps the GestureDetector with a Container and decorates the Container with as much Padding, Border, and Decoration as needed.
GestureDetector(
onTap: () => _focusNode.requestFocus(),
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(4),
),
child: TextField(
focusNode: _focusNode,
decoration: const InputDecoration.collapsed(
hintText: 'Search...',
border: OutlineInputBorder(
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
),
),
),
);
To display an icon, change the Container child to Row, and use Icon and a TextField wrapped with Expanded.
Solution 15 - Flutter
To increase the height of TextField Widget just make use of the maxLines: properties that comes with the widget. For Example: TextField( maxLines: 5 ) // it will increase the height and width of the Textfield.
Solution 16 - Flutter
You can simply wrap Text field widget in padding widget..... Like this,
Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: TextField(
cursorColor: Colors.blue,
decoration: InputDecoration(
labelText: 'Email',
hintText: '[email protected]',
//labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(width: 2, color: Colors.blue,)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(width: 2, color: Colors.green)),
)
),
),
Solution 17 - Flutter
You can change max
minLines: 4,
maxLines: 6,