Reputation: 2493

How to change TextField's height and width?

How to customise TextField's width and height?

Upvotes: 209

Answers (26)

M Ameer Hamza

Reputation: 1

use isDense =true, isCollapse=true Property in Input Decoration,

This is Youtube link for Adjust Height

https://www.youtube.com/watch?v=gcU8GNtCzaU

Upvotes: 0

Paras Palli

Reputation: 194

TextField( decoration: InputDecoration( isDense: true, ) )

Upvotes: 0

martinseal1987

Reputation: 2419

i wanted to make the text field a set height and i didnt want to change the max lines field as it should be 1, i achieved this by adding constraints and padding to the input decoration, be careful the error text may mess with the size just make sure to leave enough space

return InputDecoration(
  contentPadding: const EdgeInsets.symmetric(
    vertical: 32,
  ),
  constraints: const BoxConstraints(
    maxHeight: 72,
  ),

Upvotes: 2

Rahul Kushwaha

Reputation: 6722

If you want to increase the height of TextFormField dynamically while typing the text in it. Set maxLines to null. For Example:-

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))),
        ),

Upvotes: 16

abdulaziz alghaili

Reputation: 131

Just add: contentPadding:EdgeInsets.symmetric(vertical: 15,horizontal: 15),

Upvotes: 1

Syed Arsalan Kazmi

Reputation: 1285

For height, you can simply use maxLines.

Upvotes: 0

kunj kanani

Reputation: 1622

Finally, I got my solution using this trick.

Provide Height and width of sizedbox and set expand the property to true. Also, set maxLines to null and minLines to null.

SizedBox(
      height: SizeConfig.screenWidth * 0.1377,
      child: TextFormField(
        validator: validator,
        enabled: isEnabled,
        expands: true,
        maxLines: null,
        minLines: null,
      ),
    );

Upvotes: 3

CopsOnRoad

Reputation: 267544

Screenshot:

You can do it in many ways:

Using `maxLines` + `expands`:

SizedBox(
  width: 240, // <-- TextField width
  height: 120, // <-- TextField height
  child: TextField(
    maxLines: null,
    expands: true,
    keyboardType: TextInputType.multiline,
    decoration: InputDecoration(filled: true, hintText: 'Enter a message'),
  ),
)

Using just `maxLines`:

Widget _buildTextField() {
  final maxLines = 5;

  return Container(
    margin: EdgeInsets.all(12),
    height: maxLines * 24.0,
    child: TextField(
      maxLines: maxLines,
      keyboardType: TextInputType.multiline,
      decoration: InputDecoration(filled: true, hintText: 'Enter a message'),
    ),
  );
}

Upvotes: 71

DiyorbekDev

Reputation: 774

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
    constraints: BoxConstraints(maxHeight:48,maxWidth: 327,),
  ),
);

Upvotes: 2

s-hunter

Reputation: 25816

Provide a maxLines and add a BoxConstraints with width and height in InputDecoration.

TextField(
  maxLines: 10,
  decoration: InputDecoration(
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
    constraints: BoxConstraints.tightFor(width: 300, height: 100),
  ),
);

Upvotes: 1

Ashutosh Kumbhar

Reputation: 49

Adjust Height using contentPadding instead of SizeBox or Container

Container(
        width: width * 0.85,
        child: TextFormField(
          textInputAction: TextInputAction.next,
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 10), //Imp Line
            isDense: true,
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
                borderSide: const BorderSide(
                  width: 0.5,
                  color: Constants.secondaryColourLight,
                )),
          ),),)

80k ka code hein 80k ka

Upvotes: 4

Mikolaj Kieres

Reputation: 4405

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

const SizedBox(
  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

const SizedBox(
  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:

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

Upvotes: 314

Bagadi Venkat Ramesh

Reputation: 301

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)

Upvotes: 4

Abdelrahman Tareq

Reputation: 2297

You can change max

minLines: 4,
maxLines: 6,

Upvotes: 0

Torimeshi

Reputation: 11

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.

Upvotes: 1

vishal sachan

Reputation: 39

simply wrap the TextField() in SizedBox() and give the height of the sized box

Upvotes: 3

Pius T.K

Reputation: 427

Wrap TextField in SizedBox for the width

SizedBox(
  height: 40,
  width: 150,
  child: TextField(),
)

Upvotes: 12

user15149199

Reputation: 21

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;
                });
              },
          ),
     ),

Upvotes: 1

alexalejandroem

Reputation: 1162

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),
)

Upvotes: 21

Hari Lakkakula

Reputation: 307

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(),
                  ),
                ),

Upvotes: 2

Meet Patel

Reputation: 21

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)),
                )

            ),
          ),

Upvotes: 0

Victor Ayodeji Ogundola

Reputation: 171

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.

Upvotes: 0

user1076940

Reputation: 41

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),
                    ),
                  )

Upvotes: 3

Bijoya_Banik

Reputation: 449

TextField( minLines: 1, maxLines: 5, maxLengthEnforced: true)

Upvotes: 1

Jay Dhamsaniya

Reputation: 1881

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:

Upvotes: 181

shahana kareen

Reputation: 364

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)),
  )
),

Upvotes: 6

How to change TextField&#39;s height and width?

Answers (26)

Screenshot:

Using maxLines + expands:

Using just maxLines:

Related Questions

How to change TextField's height and width?

Using `maxLines` + `expands`:

Using just `maxLines`: