How do I remove content padding from TextField?

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

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

You can use contentPadding of InputDecoration. Here is sample code

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

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

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

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

You can try this hack by reducing height of TextField

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

You can use:

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

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.

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.

For those struggling with the TextFormField that has a suffixIcon or prefixIcon not being allowed to be smaller due to the 48x padding, you can achieve so, by wrapping it with an IntrinsicHeight that will force the child (TextFormField in this case) to shrink to a more reasonable size, mostly like it will be sized to the input font size + any decoration padding.

However, have in mind that this should only be a workaround and there should be an option to set the icon padding manually. With this solution, if you have your icon bigger than the TextFormField input text, it won't care and the Icon will overflow the box.

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

replace prefixIcon-> prefix

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

You can set This value for TextFeild

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