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

Answer 1

更新（2021 年 4 月）：仍然适用于 flutter 2.0.4

从 flutter 1.17.5 开始（在 1.2X 中仍然相同）以手动完全删除或操作填充，首先您必须设置isDense: true，然后您可以contentPadding根据需要调整或在父小部件上应用填充。

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

Answer 2

我能够通过向 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),
       ),
    ),

这是输出，希望这有帮助

Answer 3

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

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

Answer 4

通过使用应用减去填充

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

Answer 5

您可以使用contentPaddingInputDecoration。这是示例代码

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

Answer 6

您可以通过降低高度来尝试此技巧TextField

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