如何从TextField中删除内容填充？

Question

我刚开始接触Flutter，正在创建登录表单，为此我使用了TextField并添加前缀图标，但在文本框（用户ID和PIN）之间以及前缀图标之前出现了一些额外的空白。我还尝试过使用InputDecorationTheme，但没有起作用。

请告诉我如何删除或减少这个空格？

以下是我的代码：

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

- Zubair Rehman

---

你找到解决方案了吗？ - Brinda Rathod

@BrindaRathod 如果你还想知道的话，我碰巧遇到了同样的问题，并且有一个相对稳定的解决方案 https://stackoverflow.com/a/60018290/12402503 - Federick Jonathan

对于那些在Flutter SDK 1.17.5之后来到这个问题的人，请参考这个答案https://dev59.com/xFQJ5IYBdhLWcg3wiWab#63160454 - Jwildsmith

Answer 1

更新（2022年8月）：Flutter 3.0.5与之前相同
更新（2021年4月）：在Flutter 2.0.4中仍然有效

从 Flutter 1.17.5 开始（在2.X中仍旧适用），要完全删除或手动操纵填充，首先必须设置isDense: true，然后才能根据需要调整contentPadding或在父部件上应用填充。

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

如Ataberk的评论中所提到的，你也可以使用contentPadding: EdgeInsets.zero

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

- Alexander Dischberg

---

为什么EdgeSymmetric.zero似乎不起作用？ - emanuel sanga

TextField没有inputDecorationTheme属性。 - shuster

“inputDecorationTheme”这个命名参数未定义。这怎么会被点赞？ - Oliver Dixon

isDense: true与contentPadding: EdgeInsets.zero结合使用可以使文本框尽可能地小。 - Ataberk

Answer 2

你可以使用InputDecoration的contentPadding。以下是示例代码

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

- Ketan Ahir

---

谢谢回复，但我想在前缀图标之前删除额外的空格。 - Zubair Rehman

那正是我所需要的！ - AlanKley

@Zubair Rehman，你找到了去除 suffixIcon 左侧填充的方法吗？ - David

实际上，看看这个答案 - 你需要使用isDense: true来消除TextField中额外的垂直空间。 - kosiara - Bartosz Kosarzycki

在我的情况下，将 isDense 设置为 true 起作用了。 - Bensal

Answer 3

我通过给prefixIcon添加前缀约束条件并在prefixIcon周围添加填充轻松实现了这一点，就像这样：

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

这是输出结果，希望能帮到你。

- Mahesh Jamdade

Answer 4

我有点晚了，但你唯一需要做的就是使用负填充：

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

- Skyost

---

可以正常工作，但需要使用 EdgeInsets.all(你的值)。 - Skullper

它在这里工作了！天啊，愿它永远都能工作！我正在使用contentPadding: EdgeInsets.only(top: -26)。 - Caio Santos

Answer 5

通过使用负的padding来应用

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

将上述代码放置在图标容器内部

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

- Brinda Rathod

---

这应该被标记为正确答案。 - Joseph Ofem

Answer 6

您可以通过减小 TextField 的高度来尝试此方法。

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

- CopsOnRoad

Answer 7

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

将isDense: true设置为true，可以完全控制contentPadding的设置。确保按照您的需求设置EdgeInsets。

- Sayuru_Sandaru

Answer 8

您可以使用：

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

- Javier Hinmel

Answer 9

我尝试了许多方法，但只有一种方法适合我。 如果你想要移除前缀图标的左边距，请在InpuDecoration中添加prefixIconConstraints:BoxConstraints(maxHeight: 20)。

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

请查看截图：请查看截图

- Rashpinder Singh

---

这是实际可行的解决方案，非常感谢您挽救了我的一天。 - Rohit Sharma

Answer 10

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

- sajid