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

相关文章
|
10天前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
156 58
|
5天前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
80 49
|
25天前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
|
10天前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
10天前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?
|
1月前
|
容器
Flutter基本组件Text使用
Flutter基本组件Text使用
40 12
|
21天前
|
Dart
Flutter|常用数据通信组件
在做需求时经常会遇到组件间通信,本篇汇总了几种常用的通信方式
17 0
|
3月前
|
Dart 开发者 UED
flutter 非常用组件整理 第三篇
本文是非常用组件的第三讲,介绍了一些不为人知但却能大幅提升Flutter应用UI效果和功能的高级组件,包括FadeInImage、GridPaper、Hero等,为开发者带来更丰富的UI设计可能。
flutter 非常用组件整理 第三篇
|
3月前
|
Dart 数据安全/隐私保护 开发者
flutter 非常用组件整理 第二篇
本文是Flutter非常用组件第二篇,从开发者的视角出发,精选并深入剖析了AboutDialog、AnimatedGrid、Badge等鲜为人知却功能强大的隐藏组件,为读者提供了一份全面的Flutter UI组件使用指南。无论您是初学者还是有经验的开发者,相信本文都能为您的Flutter项目注入新的活力,助力打造出色的应用界面。
flutter 非常用组件整理 第二篇
|
2月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
29 2
下一篇
无影云桌面