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

回答1:

You can use contentPadding of InputDecoration. Here is sample code

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

回答2:

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

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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/53644897/how-do-i-remove-content-padding-from-textfield

标签

Flutter

textfield

flutter-layout