• 关注公众号 喵查铺子 一键查题~

flutter修改TextFiled主题

flutter开发 尔雅学习君 3年前 (2020-01-05) 扫描二维码
文章目录[隐藏]

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风格

 

flutter修改TextFiled主题

第1、2步修改过后的效果
flutter修改TextFiled主题

第三步修改之后效果

flutter修改TextFiled主题


联系邮箱:oqcvvz[at]163[dot]com
喜欢 (0)
尔雅学习君
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址