CODEWITHSUNDEEP
fluttertextfieldflutter-layout
Zubair Rehman
Zubair Rehman

Reputation: 2535

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

x

Upvotes: 80

Views: 91594

Answers (17)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20221

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

enter image description here

Upvotes: 28

Volodymyr Kuleba
Volodymyr Kuleba

Reputation: 1

Just try to wrap your TextFormField or TextField into ConstrainedBox with maxHeight constraints

ConstrainedBox(
    constraints: const BoxConstraints(
           maxHeight: 40),
    child: TextField(...)

Upvotes: 0

Hasnain Elahi
Hasnain Elahi

Reputation: 470

In my case, it solved this issue:

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

enter image description here

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

Upvotes: 0

R2T8
R2T8

Reputation: 2590

use

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

Upvotes: 0

sajid
sajid

Reputation: 215

remove prefixIcon

add icon and follwong two line

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

Upvotes: 4

Alexander Dischberg
Alexander Dischberg

Reputation: 2278

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

Upvotes: 136

Sayuru_Sandaru
Sayuru_Sandaru

Reputation: 360

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.

Upvotes: 4

Erfan Rezaee
Erfan Rezaee

Reputation: 21

You can set This value for TextFeild

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

Upvotes: 2

Trần Văn Hiếu
Trần Văn Hiếu

Reputation: 49

replace prefixIcon-> prefix

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

Upvotes: 2

Rashpinder Singh
Rashpinder Singh

Reputation: 119

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

Upvotes: 4

Skyost
Skyost

Reputation: 1536

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

Upvotes: 18

Javier Hinmel
Javier Hinmel

Reputation: 719

You can use:

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

Upvotes: 4

Lama Madan
Lama Madan

Reputation: 737

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.

enter image description here

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267404

You can try this hack by reducing height of TextField

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

Upvotes: 6

Brinda Rathod
Brinda Rathod

Reputation: 2903

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

Upvotes: 14

Dhrumil Shah - dhuma1981
Dhrumil Shah - dhuma1981

Reputation: 15789

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.

Upvotes: 4

Ketan Ahir
Ketan Ahir

Reputation: 6728

You can use contentPadding of InputDecoration. Here is sample code

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

Upvotes: 43

Related Questions