Flutter 如何自定义TextField组件获取焦点时的边框颜色

你只需要在InputDecoration中新增focusedBorder属性配置即可，该属性专门控制输入框获取焦点时的边框样式，修改后的代码如下：

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.send),
        hintText: 'Hint Text',
        helperText: 'Helper Text',
        counterText: '0 characters',
        border: OutlineInputBorder(),
        // 新增聚焦状态边框配置
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green, width: 2.0),
        ),
      ),
    )

如果需要全局修改所有TextField的聚焦边框颜色，不需要逐个组件配置，可以在项目根组件的ThemeData中统一设置：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.green, width: 2.0),
      ),
      // 可在这里统一配置其他状态的边框样式
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.grey, width: 1.0),
      ),
      border: OutlineInputBorder(),
    ),
  ),
  home: const MyHomePage(),
)

• 如果你使用的是下划线样式的输入框，只需要把上述代码中的OutlineInputBorder替换为UnderlineInputBorder即可，borderSide的配置逻辑完全一致。

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