解决Flutter中ThemeData.primaryColor在AppBar等组件中不生效

简介: 解决Flutter中ThemeData.primaryColor在AppBar等组件中不生效

出现场景

闲着没事,将Flutter SDK升级到了2.10.5,结果发现app所有页面的AppBar颜色全变成了默认的蓝色,在MaterialApp中设置的primaryColor颜色没有生效。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.green,
  ),
)

解决方法

通过Flutter的github issues发现,从Flutter 2.5开始,Flutter团队开始慢慢移除ThemeData.primaryColor属性对所有组件的影响,取而代之的是基于ColorScheme的Color。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.green,
    colorScheme: ColorScheme.light().copyWith(primary: Colors.green),
  ),
)

如果想要所有组件保持统一主题,目前可以使用以下代码达到统一。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        ///因为有的组件的默认颜色使用的是 primaryColor,有的用的是primarySwatch,所以必须同时设置
        primaryColor: Colors.green,
        colorScheme: ColorScheme.light().copyWith(primary: Colors.green),
        primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

相关文章
|
3月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
187 58
|
3月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
110 49
|
1月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
131 1
|
1月前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
107 1
|
3月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
181 60
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
29 2
|
2月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
1月前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
46 0
|
3月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
3月前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?