Flutter实现TextFormField整体圆角（含背景色区域）的方法

要实现输入框背景色区域的圆角效果，不能仅依赖边框设置，需要开启背景填充并配合圆角配置，具体修改如下：

全局主题修改（推荐） #

在你的ThemeData的inputDecorationTheme中添加filled和fillColor属性，同时调整边框样式：

theme: ThemeData(
  primaryColor: Color(0xFF623CEA),
  fontFamily: 'Manrope',
  inputDecorationTheme: InputDecorationTheme(
    filled: true, // 启用背景填充
    fillColor: Colors.white, // 设置输入框背景色，替换为你需要的颜色
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
      borderSide: BorderSide(color: Colors.black), // 聚焦状态下的边框颜色
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
      borderSide: BorderSide.none, // 普通状态下隐藏边框（若需要边框可改为对应颜色）
    ),
    labelStyle: TextStyle(color: Colors.black45),
    iconColor: Colors.grey,
  )
),

单个TextFormField单独设置 #

如果不需要全局生效，也可以直接给目标TextFormField的decoration配置：

TextFormField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.white,
    borderRadius: BorderRadius.circular(15.0),
    border: OutlineInputBorder(borderSide: BorderSide.none),
    labelStyle: TextStyle(color: Colors.black45),
    iconColor: Colors.grey,
  ),
  // 其他属性...
)

原理说明 #

• filled: true是开启背景填充的关键，只有设置为true，fillColor才会生效，让输入框背景区域填充指定颜色。
• 配合borderRadius设置，就能让背景色区域呈现圆角效果，而非仅边框圆角。
• 调整borderSide可以控制边框的显示状态，若不需要边框则设为BorderSide.none，若需要边框则设置对应颜色即可。

内容的提问来源于stack exchange，提问作者Kyle Andrew