How to change TextField s height and width

Question

How to customise TextField s width and height

User · Answer

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

User · Answer

TextField  minLines  1  maxLines  5  maxLengthEnforced  true

User · Answer

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   quot Enter Question quot                 labelText   quot Enter Question quot                 border  OutlineInputBorder                    borderRadius  BorderRadius circular 10 0

User · Answer

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   lt Widget gt         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

User · Answer

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

User · Answer

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

User · Answer

Wrap TextField in  SizedBox for the width

User · Answer

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

User · Answer

If you use  quot suffixIcon quot  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

User · Answer

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   xyz gmail com                     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

User · Answer

int numLines   0  Container  height  numLines  lt  7   148   WidgetsConstant height   numLines   WidgetsConstant height   24  child  TextFormField  controller   bodyText  maxLines  numLines  lt  7   148   numLines  keyboardType  TextInputType multiline  textInputAction  TextInputAction newline  onChanged   String value    setState      numLines     n  allMatches value  length   1

User · Answer

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

[flutter] How to change TextField's height and width?

Examples related to flutter

Examples related to flutter-layout