Flutter中如何修改TextFormField的hint label背景颜色

你要实现的效果参考如下：

下面分两种常见场景给出实现代码：

1. 修改未输入状态下hint文字的背景色 #

直接在InputDecoration的hintStyle属性中配置backgroundColor即可：

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    hintStyle: TextStyle(
      backgroundColor: Colors.lightBlueAccent, // 替换为你需要的背景色
      fontSize: 14,
    ),
    border: const OutlineInputBorder(),
  ),
)

2. 修改输入时上浮的浮动label背景色（对应示意图效果） #

单组件单独配置 #

在InputDecoration的floatingLabelStyle中配置背景色即可，一般设置为和页面背景一致的颜色，就能实现label盖住输入框边框的效果：

TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    border: const OutlineInputBorder(),
    floatingLabelStyle: TextStyle(
      backgroundColor: Colors.white, // 和页面背景色保持一致
      color: Colors.grey,
    ),
  ),
)

全局统一配置 #

如果要让项目内所有TextFormField都生效，直接在根节点MaterialApp的主题中配置inputDecorationTheme：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: const InputDecorationTheme(
      floatingLabelStyle: TextStyle(
        backgroundColor: Colors.white,
        color: Colors.grey,
      ),
      border: OutlineInputBorder(),
    ),
  ),
  home: const MyHomePage(),
)

内容的提问来源于stack exchange，提问作者Nalawala Murtaza