How to change TextField's height and width?

Question

How to customise TextField's width and height?

Mikolaj Kieres · Accepted Answer · 2022-06-15T11:00:33.653

288

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

edited Jun 15 '22 at 11:00

answered May 18 '18 at 01:33

Mikolaj Kieres

4,137
1
20
23

3

yes I can update the height/fontSize attributes but there is default padding within the TextField which adds up for extra height & width, how it can be customised .? – Aravinth thiyagarajan May 18 '18 at 05:24
2

You can use the [`decoration`](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/text_field.dart#L145) property for these purposes. Set it to `null` and all the base styles will be gone. – Mikolaj Kieres May 18 '18 at 05:36
1

Thanks, it complete removes everything. But all i need is to customise the default top and bottom padding/margin within the TextField. – Aravinth thiyagarajan May 19 '18 at 13:31
Please edit your answer again with strike through or something.. It's inconvenient to try the wrong answer, then be surprised that it's edited reading further along the end of it! – Samer May 01 '19 at 18:57
@SamersSalib I'm not sure what are you referring to. Could you be more specific? – Mikolaj Kieres May 01 '19 at 23:14
The use of Container, isn't (wasn't) the answer to this question. The edited answer is more appropriate – Samer May 02 '19 at 01:24
1

Well, OPs question is not very explicit about what exactly he wants to achieve and how w.r.t. height and width of the `TextField`. Only after adding a comment below my answer he mentiones that he's interested in the inner padding of the `TextField`. Therefore I'm not sure if your comment is really valid, as there's many ways to skin a cat and what might be solving your problem might not necessarily solve others. – Mikolaj Kieres May 02 '19 at 05:54
8

Use contentPadding with isDense: True for the best results.`InputDecoration( isDense: true, contentPadding: EdgeInsets.all(10))` – Rabi Roshan Apr 30 '20 at 09:05
Better with SizedBox – Supertommino Jun 15 '22 at 10:31
My suggestion is to use `suffixIconConstraints` of `prefixIconConstraints` property – zex_rectooor May 23 '23 at 10:44

score 155 · Answer 2 · edited Jun 20 '20 at 09:12

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:

I need the size of the text box increased. Increasing the Container does allow me to see large amounts of inputted data. — Golden Lion, Jun 02 '20 at 20:21
isDense option works for me to reduce the height of the textfield. Thank you @Jay Dhamsaniya — hemandroid, Nov 26 '20 at 08:57

CopsOnRoad · Answer 3 · 2023-02-05T19:00:49.747

64

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

edited Feb 05 '23 at 19:00

answered Feb 28 '20 at 16:14

CopsOnRoad

237,138
77
654
440

4

thanks. maxLines: maxlines worked. I can now see large amounts of inputted data. – Golden Lion Jun 02 '20 at 20:23
yes, this is what i looking for, maxLines worked perfect for my case! – Richard Sipher Nov 22 '21 at 09:46
Not work for me. It's worked after I add "expands: true" into TextField widgets. – Trần Leo Sep 12 '22 at 18:44

score 20 · Answer 4 · answered Mar 08 '21 at 08:30

20

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

answered Mar 08 '21 at 08:30

alexalejandroem

1,094
12
17

score 12 · Answer 5 · edited Jul 01 '21 at 10:07

12

Wrap TextField in SizedBox for the width

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

edited Jul 01 '21 at 10:07

Naveen Avidi

3,004
1
11
23

answered Feb 11 '21 at 23:26

Pius T.K

351
5
9

score 11 · Answer 6 · answered Feb 15 '21 at 08:25

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

Excellent. Exactly what I needed. – Fam Sep 22 '21 at 19:20 — Fam, Sep 22 '21 at 19:20
Thanks, exactly what I was looking for !! – kk4 Dec 03 '21 at 05:57 — kk4, Dec 03 '21 at 05:57

score 6 · Answer 7 · edited Mar 10 '20 at 15:40

6

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

edited Mar 10 '20 at 15:40

Philippe Fanaro

6,148
6
38
76

answered Jun 11 '19 at 04:53

shahana kareen

364
4
10

score 3 · Answer 8 · answered Oct 09 '20 at 07:32

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

score 3 · Answer 9 · edited Oct 20 '21 at 09:16

3

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

edited Oct 20 '21 at 09:16

Peter Csala

17,736
16
35
75

answered Oct 20 '21 at 09:12

vishal sachan

39
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 20 '21 at 09:16

score 3 · Answer 10 · answered Jul 26 '22 at 09:40

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

`80k ka code hein 80k ka` I agree... – Nikhil Sharma May 26 '23 at 12:35 — Nikhil Sharma, May 26 '23 at 12:35

score 2 · Answer 11 · answered Dec 28 '20 at 17:08

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

score 2 · Answer 12 · answered Jan 27 '22 at 09:23

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)

DiyorbekDev · Answer 13 · 2022-10-19T13:55:50.907

2

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

edited Oct 19 '22 at 13:55

answered Jun 04 '22 at 07:08

DiyorbekDev

706
1
5
19

It would be nice to give a brief explanation of how this works / how it solves the problem, and how it's different than existing answers. – starball Dec 28 '22 at 09:55

score 2 · Answer 14 · edited Feb 05 '23 at 19:14

2

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

edited Feb 05 '23 at 19:14

CopsOnRoad

237,138
77
654
440

answered Jun 20 '22 at 05:48

kunj kanani

324
4
5

setting the expands, the maxLines and the minLines finally made my TextFormField fill my parent SizedBox...ty! – Ramiro G.M. Oct 11 '22 at 19:26

score 1 · Answer 15 · answered Jun 17 '20 at 11:22

1

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

answered Jun 17 '20 at 11:22

Bijoya_Banik

387
4
12

score 1 · Answer 16 · edited Jun 09 '21 at 13:18

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

score 1 · Answer 17 · edited Nov 24 '21 at 04:30

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.

score 1 · Answer 18 · answered Oct 19 '22 at 11:53

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

score 0 · Answer 19 · answered Nov 17 '20 at 15:40

0

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.

answered Nov 17 '20 at 15:40

Victor Ayodeji Ogundola

131
1
11

score 0 · Answer 20 · answered Dec 17 '20 at 12:00

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

            ),
          ),

typically you would use SizedBox – w461 Dec 17 '20 at 12:35 — w461, Dec 17 '20 at 12:35

score 0 · Answer 21 · answered Jan 14 '22 at 14:09

0

You can change max

minLines: 4,
maxLines: 6,

answered Jan 14 '22 at 14:09

Abdelrahman Tareq

1,874
3
17
32

score 0 · Answer 22 · answered Apr 14 '23 at 00:45

0

For height, you can simply use maxLines.

answered Apr 14 '23 at 00:45

Syed Arsalan Kazmi

949
1
11
17

score 0 · Answer 23 · answered Aug 06 '23 at 09:49

0

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

answered Aug 06 '23 at 09:49

abdulaziz alghaili

41
5

How to change TextField's height and width?

23 Answers23

Screenshot:

Using `maxLines` + `expands`:

Using just `maxLines`:

Linked

How to change TextField's height and width?

23 Answers23

Screenshot:

Using maxLines + expands:

Using just maxLines:

Linked

Using `maxLines` + `expands`:

Using just `maxLines`: