Flutter TextField背景实现方法及圆角样式设置咨询

方案一：通过 TextField 自身的 InputDecoration 直接配置 #

这是最直接的方式，利用 InputDecoration 的内置属性实现背景色和圆角，同时控制边框样式：

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.grey[200], // 设置背景色
    hintText: "请输入内容",
    // 配置圆角边框，去掉默认边框线条
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12), // 自定义圆角大小
      borderSide: const BorderSide.none(),
    ),
    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 调整内边距，避免内容贴边
  ),
)

你之前没实现圆角，大概率是用了默认的 UnderlineInputBorder（仅下划线），换成 OutlineInputBorder 并指定 borderRadius 就能解决。

方案二：用 Container 包裹 TextField 实现 #

如果需要更复杂的背景效果（比如加阴影、渐变），可以把 TextField 嵌套在 Container 中，让 Container 负责背景样式：

Container(
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(12),
    // 可选：添加阴影效果
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.2),
        blurRadius: 4,
        offset: const Offset(0, 2),
      )
    ],
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: "请输入内容",
      border: InputBorder.none(), // 移除 TextField 默认边框
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
)

方案三：全局统一配置主题样式 #

如果项目中有多个 TextField 需要相同的背景+圆角样式，建议在全局主题中配置，减少重复代码：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: Colors.grey[200],
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: const BorderSide.none(),
      ),
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
  home: const YourHomePage(),
)

之后使用 TextField 时无需额外配置，自动应用全局样式：

TextField(hintText: "全局样式的输入框")

内容的提问来源于stack exchange，提问作者Mohammad Hosseini