Flutter TextField内边距设置：如何为输入框添加内部填充

要给TextField设置输入文本与边框的内部间距，直接在InputDecoration中添加contentPadding参数即可，通过EdgeInsets类可以灵活控制上下左右的内边距数值。

具体实现方式 #

在每个TextField的decoration属性里，添加contentPadding配置：

contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),

• horizontal控制左右方向的内边距，vertical控制上下方向的内边距
• 也可以用EdgeInsets.all(16)设置统一的内边距，或者EdgeInsets.fromLTRB(left, top, right, bottom)自定义各方向的具体数值

修改后的单个TextField代码示例 #

TextField(
  decoration: InputDecoration(
    labelText: "Ref Expedéteur", // 移除原前置空格，通过contentPadding控制间距更规范
    labelStyle: TextStyle(
      color: Color.fromARGB(255, 0, 0, 0),
      fontFamily: "Segoe UI",
    ),
    // 添加内部填充配置
    contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
          width: 3,
          color: Color.fromARGB(255, 136, 136, 136)),
      borderRadius: BorderRadius.all(
        Radius.circular(40),
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
          width: 3, color: const Color(0xffff4848)),
      borderRadius: BorderRadius.all(
        Radius.circular(40),
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(
          width: 3,
          color: Color.fromARGB(255, 66, 125, 145)),
    ),
  ),
),

批量优化建议 #

你代码中多个TextField样式重复，可封装公共的InputDecoration样式减少冗余：

InputDecoration buildInputDecoration(String label) {
  return InputDecoration(
    labelText: label,
    labelStyle: TextStyle(
      color: Color.fromARGB(255, 0, 0, 0),
      fontFamily: "Segoe UI",
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 3, color: Color.fromARGB(255, 136, 136, 136)),
      borderRadius: BorderRadius.all(Radius.circular(40)),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 3, color: const Color(0xffff4848)),
      borderRadius: BorderRadius.all(Radius.circular(40)),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 3, color: Color.fromARGB(255, 66, 125, 145)),
    ),
  );
}

使用时直接调用：

TextField(decoration: buildInputDecoration("Ref Expedéteur")),
TextField(decoration: buildInputDecoration("Nombre de colis")),
// 其余TextField同理

内容的提问来源于stack exchange，提问作者hafidi mohammed