flutter修改TextFiled主题

1、在MaterialApp中修改主题

  inputDecorationTheme: InputDecorationTheme(
    border: OutlineInputBorder(),
  ),
 
  示例位置
  ThemeData _buildShrineTheme() {
    final ThemeData base = ThemeData.light();
    return base.copyWith(
      accentColor: kShrineBrown900,
      primaryColor: kShrinePink100,
      buttonColor: kShrinePink100,
      scaffoldBackgroundColor: kShrineBackgroundWhite,
      cardColor: kShrineBackgroundWhite,
      textSelectionColor: kShrinePink100,
      errorColor: kShrineErrorRed,
      primaryIconTheme: base.iconTheme.copyWith(
        color: kShrineBrown900,
      ),
      textTheme: _buildShrineTextTheme(base.textTheme),
      primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
      accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
      //输入框的主题样式
      inputDecorationTheme: InputDecorationTheme(
        border: OutlineInputBorder(),
      ),
    );
  }
 

2、取消filled属性

TextField(
  obscureText: true,
  controller: _passwordController,
  decoration: InputDecoration(
    //filled: true,
    labelText: "Password",
  ),
),

3、进阶：修改颜色增强对比度

3.1、在TextFiled所在的类中新建如下：

class AccentColorOverride extends StatelessWidget {
  final Color color;
  final Widget child;
 
  const AccentColorOverride({Key key, this.color, this.child})
      : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Theme(
      child: child,
      data: Theme.of(context).copyWith(primaryColor: color),
    );
  }
}

3.2、使用AccentColorOverride包裹TextFiled

AccentColorOverride(
  color: kShrineBrown900,
  child: TextField(
    controller: _usernameController,
    decoration: InputDecoration(
      //filled: true,
      labelText: "UserName",
    ),
  ),
),

原始TextFiled风格

第1、2步修改过后的效果

第三步修改之后效果