解决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'),
    );
  }
}

相关文章
|
4月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
294 0
|
4月前
|
容器
Flutter 组件(一)组件概述
Flutter 组件(一)组件概述
89 0
|
7天前
|
容器
Flutter基本组件Text使用
Flutter基本组件Text使用
29 12
|
2天前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
|
2月前
|
Dart 开发者 UED
flutter 非常用组件整理 第三篇
本文是非常用组件的第三讲,介绍了一些不为人知但却能大幅提升Flutter应用UI效果和功能的高级组件,包括FadeInImage、GridPaper、Hero等,为开发者带来更丰富的UI设计可能。
flutter 非常用组件整理 第三篇
|
2月前
|
Dart 数据安全/隐私保护 开发者
flutter 非常用组件整理 第二篇
本文是Flutter非常用组件第二篇,从开发者的视角出发,精选并深入剖析了AboutDialog、AnimatedGrid、Badge等鲜为人知却功能强大的隐藏组件,为读者提供了一份全面的Flutter UI组件使用指南。无论您是初学者还是有经验的开发者,相信本文都能为您的Flutter项目注入新的活力,助力打造出色的应用界面。
flutter 非常用组件整理 第二篇
|
1月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
24 2
|
2月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
32 1
|
4月前
|
Dart
Flutter 中优雅切换应用主题的组件
【Flutter】使用adaptive_theme组件优雅切换应用主题:封装MaterialApp,支持light/dark/system模式,自定义色彩,保存选择,含调试按钮。安装配置、设置主题、监听切换、自定义颜色、读取配置步骤详细。代码示例与学习路径推荐。[查看完整教程](https://flutter.ducafecat.com/blog/flutter-app-theme-switch)
Flutter 中优雅切换应用主题的组件
|
4月前
|
设计模式 JavaScript 前端开发
flutter组件封装技巧
工厂函数不会自动调用,需要手动调用
45 3