How do I remove content padding from TextField?

Question

I am new to flutter and I am creating login form, for that I have used TextField and added prefix icon but I am getting some extra spaces in between textfields (user id and pin) and before the prefix icon. I have also tried InputDecorationTheme but it didn't work.

Please let me know how can I remove or reduce the space.??

Below is my code:

TextField(
  maxLength: 8,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    hintText: hint,
    hintStyle: TextStyle(fontSize: 12.0),
    prefixIcon: Icon(icon),
    counterText: '',
  ),
)

@BrindaRathod Just in case you still want to know. I happened to experience the same problem and have a kind of solid solution for that https://stackoverflow.com/a/60018290/12402503 — Federick Jonathan, Feb 01 '20 at 15:49
For those coming to this question after Flutter SDK 1.17.5 see this answer https://stackoverflow.com/a/63160454/6732069 — Jwildsmith, Nov 08 '20 at 04:12

Alexander Dischberg · Answer 1 · 2022-08-02T08:54:16.660

115

Update (August 2022): still the same as of flutter 3.0.5
Update (April 2021): still work in flutter 2.0.4

As of flutter 1.17.5 (and still the same in 2.X) to completely remove or manipulate the padding manually, first you must set isDense: true and then you can adjust the contentPadding as you wanted or apply padding on the parent widget instead.

// using theme
ThemeData(
  inputDecorationTheme: InputDecorationTheme(
     isDense: true,// this will remove the default content padding
     // now you can customize it here or add padding widget
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
  ),
)

// per widget
TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
   ),
)

As mentioned in the comment by Ataberk you can also use contentPadding: EdgeInsets.zero

TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.zero,
     ...
   ),
)

edited Aug 02 '22 at 08:54

answered Jul 29 '20 at 18:46

Alexander Dischberg

1,890
2
13
26

why doesnt EdgeSymmetric.zero seem to not work – emanuel sanga Dec 30 '20 at 05:54
1

TextField has not an `inputDecorationTheme` attribute. – shuster Jan 28 '22 at 21:11
```The named parameter 'inputDecorationTheme' isn't defined.``` How is this upvoted? – Oliver Dixon Mar 12 '22 at 20:20
1

`isDense: true` combined with `contentPadding: EdgeInsets.zero` makes the textfield smallest possible. – Ataberk Mar 13 '22 at 23:30

score 39 · Answer 2 · answered Dec 06 '18 at 05:12

39

You can use contentPadding of InputDecoration. Here is sample code

TextField(
   maxLines: 8,
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 5),
      labelText: 'Description',
      labelStyle: txtHintStyle,
   )
 )

answered Dec 06 '18 at 05:12

Ketan Ahir

6,678
1
23
45

thanks for reply but i want to remove additional spaces before prefix icon – Zubair Rehman Dec 06 '18 at 12:16
That did exactly what I needed! – AlanKley Apr 06 '19 at 23:36
1

@Zubair Rehman do you find the method to remove the left padding of suffixIcon? – David Jun 25 '19 at 07:29
3

Actually, have a look a this [answer](https://stackoverflow.com/a/63160454/706387) - you need `isDense: true` to remove additional vertical space in TextField – kosiara - Bartosz Kosarzycki Dec 21 '20 at 16:02
1

in my case setting isDense to true worked – Bensal Mar 27 '21 at 09:20

score 26 · Answer 3 · answered Apr 17 '20 at 09:51

I was able to easily achieve that by adding prefix constraints to the prefixIcon and wrapping the prefixIcon with padding like this

      TextFormField(
         enabled: true,
         decoration: InputDecoration(
         prefixIconConstraints:BoxConstraints(minWidth: 23, maxHeight: 20),
         prefixIcon: Padding(
                       padding: const EdgeInsets.only(right: 20),
                       child: Icon(
                                Icons.email,
                                color: clockColor,
                               ),
                        ),
         hintText:"Email Address"
         hintStyle:TextStyle(color: hintColor, fontSize: 14),
       ),
    ),

heres the output,hope this helps

Skyost · Answer 4 · 2020-06-20T11:57:59.200

18

I come a bit late, but the only thing you have to do is to use negative padding :

TextField(
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: -5),
      labelText: 'Description',
   )
 )

edited Jun 20 '20 at 11:57

answered Feb 06 '19 at 10:56

Skyost

1,429
1
16
31

3

It's working, but need to use `EdgeInsets.all(your_value)` – Skullper Jun 30 '19 at 08:16
It worked here! Jesus, may this always work! I'm using contentPadding: EdgeInsets.only(top: -26) – Caio Santos Apr 27 '21 at 05:01

Brinda Rathod · Answer 5 · 2019-09-16T04:00:11.990

By applying minus padding by using

transform: Matrix4.translationValues(-10.0, 0.0, 0.0),

put above line inside the icon container

TextFormField(
          keyboardType: TextInputType.number,
          style: new TextStyle(color: Colors.white, fontSize: 17),
          decoration: new InputDecoration(
              prefixIcon: Container(
                transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
                child: Icon(
                  Icons.vpn_key,
                  color: Colors.white,
                ),
              ),
              labelText: "Enter Password",
              labelStyle: new TextStyle(color: Colors.white)),
        ),

This should be marked as the correct answer – Joseph Ofem Jul 06 '23 at 16:29 — Joseph Ofem, Jul 06 '23 at 16:29

score 5 · Answer 6 · answered Feb 29 '20 at 08:53

5

You can try this hack by reducing height of TextField

SizedBox(
  height: 44, // set this
  child: TextField(),
)

answered Feb 29 '20 at 08:53

CopsOnRoad

237,138
77
654
440

score 4 · Answer 7 · answered Apr 23 '20 at 21:08

4

You can use:

TextField(
   maxLines: 1,
   decoration: InputDecoration(contentPadding: EdgeInsets.only(bottom: -10.0))
 )

answered Apr 23 '20 at 21:08

Javier Hinmel

599
6
9

score 4 · Answer 8 · answered Jun 19 '22 at 02:24

TextField(
   decoration: InputDecoration(
      isDense: true, //Set this to true
      contentPadding: EdgeInsets.symmetric(vertical: 0),
      hintText: 'Description',
   )
 )

Setting isDense: true will give you full control of setting the contentPadding. Make sure to set the EdgeInsets. as your need.

score 3 · Answer 9 · answered Dec 06 '18 at 07:01

That prefixIcon has already contained the padding of 12.0 according to documentation. So you don't need to provide extra padding.

See this below explanation & code which you can find in input_decorator.dart.

The prefix icon is constrained with a minimum size of 48px by 48px, but can be expanded beyond that. Anything larger than 24px will require additional padding to ensure it matches the material spec of 12px padding between the left edge of the input and leading edge of the prefix icon. To pad the leading edge of the prefix icon:

prefixIcon: Padding(
     padding: const EdgeInsetsDirectional.only(start: 12.0),
     child: myIcon, // icon is 48px widget.
)

I hope it will help.

thanks for your reply @dhuma, but i want to remove padding not to add more padding :) — Zubair Rehman, Dec 06 '18 at 14:22

score 3 · Answer 10 · answered Feb 09 '21 at 05:57

I have try many ways but only worked fine for me. If you want to remove the left padding of Prefix icon, Give prefixIconConstraints:BoxConstraints(maxHeight: 20) to InpuDecoration .

TextField(
      autocorrect: false,
      textAlignVertical: TextAlignVertical.bottom,
      onSubmitted: (value) {
        getXHelper.textFieldSubmit(value, type);
      },
      decoration: InputDecoration(
        isDense: true,
        prefixIconConstraints:BoxConstraints(maxHeight: 20) ,
        hintText: placeHolder,
        prefixIcon: Padding(
          padding: const EdgeInsets.only(top: 0, right: 5, bottom: 0),
          child: Icon(
            icon,
            size: 20,
          ),
        ),
        suffixIcon: type == TextFieldType.password ? passShowButton : null,
      ),
      controller: controller,
      cursorColor: Colors.black,
      style:
          TextStyle(color: Colors.black, fontFamily: AppFontFamily.fontFamily),
    );

Please check the screen shot

This is the actual solution which works fine, Thank you for saving my day. — Rohit Sharma, Apr 12 '23 at 07:17

score 3 · Answer 11 · answered Nov 15 '22 at 05:40

remove prefixIcon

Row(
  children: [
    //add icon  
    Icon(Icons.person,color: Colors.grey,),
    Flexible(
      child: TextFormField(
        decoration:  InputDecoration(
          border: InputBorder.none,
          hintText: 'User Id',
          contentPadding: EdgeInsets.all(0.0),//add content padding
          isDense: true,//add isDense
        ),
      ),
    ),
  ],
),
//add some space between two row
SizedBox(height: 10,),
Row(
  children: [
    Icon(Icons.lock,color: Colors.grey,),
    Flexible(
      child: TextFormField(
        decoration:  InputDecoration(
          border: InputBorder.none,
          hintText: 'Pin',
          contentPadding: EdgeInsets.all(0.0),
          isDense: true,
        ),
      ),
    ),
  ],
),

score 2 · Answer 12 · answered Nov 22 '21 at 03:23

replace prefixIcon-> prefix

 TextFormField(
              decoration: InputDecoration(
                prefix:Icon(
                  Icons.perm_identity_outlined,
                  color: AppColors.primary,
                ),
                labelText:'UserName'
              ),
            )

score 1 · Answer 13 · answered Mar 30 '22 at 18:40

1

You can set This value for TextFeild

   decoration: InputDecoration(
   isDense: true,
   contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
   ...
 )

answered Mar 30 '22 at 18:40

Erfan Rezaee

11
1

score 0 · Answer 14 · answered Mar 25 '20 at 23:19

I had to achieve something similar but could not find perfect solution. Came up with and work around using Stack widget.

Widget _username(context){
  return SizedBox(
    height: 35,
    child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: Icon(
            Icons.mail,
            size: 20,
            color: Theme.of(context).accentColor,
          ),
        ),
        TextField(
          style: TextStyle(
              color: Colors.white
          ),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 11.0, horizontal: 33.0),
            hasFloatingPlaceholder: false,
            labelText: 'Username',
            labelStyle: TextStyle(
                color: Colors.white
            ),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).accentColor,
                )
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ]
    ),
  );
}

SizedBox is used to control the vertical padding. For horizontal padding, Icon and TextField are stacked. This results overlapped TextField's label above Icon so contentPadding property is used to move the label to the right. With this I achieved following look.

score 0 · Answer 15 · answered Jun 20 '23 at 09:59

0

use

buildCounter: (BuildContext context, {int? currentLength, int? maxLength, bool? isFocused}) => null,

answered Jun 20 '23 at 09:59

R2T8

2,122
2
14
17

score 0 · Answer 16 · answered Jul 27 '23 at 12:24

In my case, it solved this issue:

Widget buildCustomPrefixIcon(IconData iconData) {
  return Container(
    width: 0,
    alignment: Alignment(-0.99, 0.0),
    child: Icon(
      iconData,
    ),
  );
}

TextFormField(
  controller: _textEditConPassword,
  focusNode: _passwordFocus,
  keyboardType: TextInputType.text,
  validator: _validatePassword,
  style: getStyleText(context),
  decoration: InputDecoration(
      isDense: true,
      //to reduce the size of icon, use if you want. I used, because my custom font icon is big
      labelText: AppConstants.PASSWORD,
      contentPadding: EdgeInsets.only(left: 0),
      //to make the base line of icon & text in same
      labelStyle: getLabelStyleText(context),
      prefixIcon: buildCustomPrefixIcon(AppCustomIcon.icon_pwd_key)),
)

How do I remove content padding from TextField?

16 Answers16

Linked