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

原创 已于 2022-04-22 14:50:04 修改 · 5.5k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #primaryColor #ColorScheme

于 2022-04-21 17:36:03 首次发布
升级Flutter到2.10.5后，发现所有页面的AppBar颜色变为默认蓝色，原因是从Flutter 2.5开始，ThemeData.primaryColor不再影响所有组件。解决方法是在MaterialApp中设置colorScheme，同时指定primaryColor和primarySwatch，确保颜色一致。

出现场景

闲着没事，将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
最低0.47元/天 解锁文章
Flutter 设置 App 的主色调与字体
Flutter 跨平台技术研究
11-17 1381
App 开发过程中，肯定希望给用户带来一致的体验，这其中最基础的就是色调、字体保持一致。在 Flutter 中，可以设置全局的主题色调和字体，从而在其他页面引用主色调和字体，实现页面展示层面的一致。 Flutter 的主题色和字体可以在MaterialApp 中设置，即在 main.dart 的入口返回的 MaterialApp 组件统一设置全局的主色调和字体。如下面的代码所示： class MyApp extends StatelessWidget { @override Widget bui.
Flutter 实现高仿开眼 APP 的页面开发 01
Mikyou的专栏
09-22 791
通过前面一系列有关 Dart 基础知识、Dart 进阶知识以及 Dart 核心异步编程的学习。终于迎来了 Dart 的实战篇，理论终将要服务实践。之前很多小伙伴一开始上来就非常看重实战开发，对基础知识一带而过。如果你是有认真一步一步看着我的基础文章过来的，那么接下来的实战对非常简单，非常容易上手。因为我会列举出之前我们有详细分析过的知识点，真正感受到学过理论是怎么运用于真正的实际项目中的。如果前...
flutter 五点一点四：MaterialApp Theme 给你一堆颜色看看
weixin_41648633的博客
01-25 943
设置 colorSchemecolorScheme: ColorScheme.dark()设置 colorSchemecolorScheme:ColorScheme.light()Ctrl+左键 点击 查看系统 snack_bar的使用。组件增加appbar。
解决Flutter顶部栏颜色修改 theme: ThemeData(primaryColor: Colors.white)不起作用的问题
m0_46527751的博客
03-10 6362
解决Flutter顶部栏颜色修改 theme: ThemeData(primaryColor: Colors.white)不起作用的问题 return MaterialApp( debugShowCheckedModeBanner: false, // home: Tabs(), initialRoute: '/', onGenerateRoute:onGenerateRoute, theme: ThemeData( primaryColor: Colors.white ), ) 发现顶部栏颜色没有变
flutter theme:themeData() 统一设置主题颜色不起作用解决方法
weixin_44864357的博客
02-05 6971
随着flutter组件的版本更新每一个组件的使用方法和作用都有了有些变化。今天我遇到的一个问题让我很头疼，网上找了很多没找到答案，试了好多方法最后找到了解决方法。 问题：flutter MaterialApp 通过theme属性统一设置主题颜色后不起作用。 @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter企业站实战', debugShowChecked
Flutter篇 去掉右上角的贴纸，以及改变主题色primaryColor、primarySwatch
独树一枝
02-20 3947
去掉右上角的贴纸 debugShowCheckedModeBanner: false, 改变主题色的方法 1、如果是系统自带的颜色属性，可以使用primaryColor ThemeData(primaryColor:Colors.blue), 2、但是有些颜色在primaryColor中是不适用的，会报红，这时，推荐第二种方法primarySwatch可以接收颜色的0x进制（16进制）和常用的颜色属性 theme: ThemeData( primarySwa...
flutter raisebutton color 无效
zww986736788的博客
08-07 413
添加 onPress:(){}属性即可
Flutter深色模式适配
张钦的博客
04-03 1357
Flutter的深色模式以及跟随系统设置比较简单，我感觉需要注意的是开发过程中尽量使用Theme中的颜色与样式，开发过程中遇到的比较大的坑就是`provider`的一些问题，可能是因为我用的版本新一些，网上找了很多文章，总会遇到一些问题。本文的深色模式适配是通过修改`themeMode`来实现的。
flutter 主题色不起作用
03-28
还有Material组件的问题，因为Flutter的许多组件如AppBar、Button等默认使用主题色，但如果用户自定义这些组件时没有使用主题数据，也可能导致不生效。比如，用户可能手动设置了AppBar的颜色，覆盖了主题色。需要...
Flutter自定义主题颜色
WEB前端李志杰
04-18 8226
完全实现Flutter自定义主题颜色，是定义任意的主题颜色呦！
Flutter 入门与实战（四）：设置 App 的主色调与字体(1)
2401_84149785的博客
04-17 1106
), ), fontFamily: ‘Georgia’, ), home: AppHomePage(), ); } }通过 MateriaApp 的 theme 属性，构建 ThemeData 来配置全局主题。其中ThemeData常用的属性如下所示：​在应用中可以通过 Theme.of(context)获取当前主体，再获取对应的属性来继承主题的色调或字体。如下面的代码的 Text 的样式就继承了主体的bodyText1的字体特性。@override Widget build(BuildContext co
Flutter 入门与实战（四）：设置 App 的主色调与字体
2401_84122902的博客
04-10 777
通过 MateriaApp 的 theme 属性，构建 ThemeData 来配置全局主题。​在应用中可以通过 Theme.of(context)获取当前主体，再获取对应的属性来继承主题的色调或字体。如下面的代码的 Text 的样式就继承了主体的bodyText1的字体特性。@override‘岛’,),),而在BottomNavigationBar中的 selectedItemColor（选择颜色）则继承了主色调。@override。
【笔记】flutter theme:themeData() 统一设置主题颜色不起作用解决方法
weixin_46065358的博客
03-11 3789
前言 flutter theme:themeData() 统一设置主题颜色不起作用解决方法 本篇只为效果演示和记录作用 解决方案来自 解决Flutter顶部栏颜色修改 theme: ThemeData(primaryColor: Colors.white)不起作用的问题_m0_46527751的博客-优快云博客 import 'package:flutter/material.dart'; import 'package:z_test_flutter/src/home/home..
react项目中修改ant design 主题色
weixin_45892086的博客
05-26 1291
react项目中修改ant design 主题色 1、安装less和less-loader npm i less --save 注意：less-loader 版本大于等于5.0.0 npm i less-loader --save 2、在webpack.config.dev.js文件中添加如下代码 { test: /\.less$/, use: [{ loader: "style-loader" // creates st
【转载】自定义Flutter MaterialApp主题色(primarySwatch)
MoonAndroid的博客
10-20 1042
这里有一张来自Flutter官方给出的Colors.blue的颜色卡i < 10;i++) {1,});使用时仅需要在设置primarySwatch时调用该函数即可示例primarySwatch: createMaterialColor(Colors.blueAccent) // 第一种primarySwatch: createMaterialColor(Color(0xFF448AFF)) // 第二种，注意为8为16进制，首两位FF代表不透明。
Flutter color颜色的用法
热门推荐
yechaoa
05-05 2万+
系统自带color的使用和自定义color 系统的color 查看Color的源码： static const Color black = Color(0xFF000000); 可以看到，这里的black也是赋值封装好的，我们可以直接调用（Colors.black 即可）。 当然系统也封装了很多的color使用（查看源码轻松找到）， 上面我们可以看到有很多不同程度的红色，默认就是原始的...
Flutter 基础之 Theme 主题（样式篇）
小嵩的博客
08-05 1万+
声明：本篇文章已授权微信公众号 YYGeeker 独家发布。 博主原创文章，转载请注明出处：小嵩的博客 一、介绍 Theme 类将主题应用于子控件，Theme（主题）它描述了应用程序的颜色和排版选择。Theme有两种：全局Theme和局部Theme。全局Theme是由应用程序根MaterialApp创建的Theme；而局部Theme是在应用程序某个区域范围中用于覆盖全局主题。 Google官网介绍...
Flutter进阶—自定义主题风格
咖啡花园
08-01 2万+
质感设计的Theme类将主题应用于后代控件，主题描述了应用程序的颜色和排版选择。后代控件使用Theme.of获取当前主题的ThemeData对象，当控件使用Theme.of时，如果主题稍后更改，则会自动重建，以便可以应用更改。我们可以通过Theme.of查看当前应用程序的配色方案。class _MyHomePageState extends State<MyHomePage> { Widget
flutter中paint.shader
最新发布
10-17
在 Flutter 里，`paint.shader` 可用于为绘制的图形应用着色器效果，着色器能实现渐变、纹理等特殊视觉效果。以下是使用方法和示例： ### 使用方法 1. **创建着色器对象**：Flutter 提供了多种着色器类型，像 `LinearGradient`、`RadialGradient`、`SweepGradient` 等，可按需创建。 2. **将着色器赋值给 `paint.shader`**：创建 `Paint` 对象后，把创建好的着色器赋给 `paint.shader` 属性。 3. **使用 `paint` 进行绘制**：在 `CustomPainter` 的 `paint` 方法里，用设置了着色器的 `paint` 对象绘制图形。 ### 示例代码 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Shader Example'), ), body: Center( child: CustomPaint( painter: ShaderPainter(), size: Size(200, 200), ), ), ), ); } } class ShaderPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { // 创建线性渐变着色器 final shader = LinearGradient( colors: [Colors.red, Colors.blue], begin: Alignment.topLeft, end: Alignment.bottomRight, ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)); // 创建 Paint 对象并设置着色器 final paint = Paint() ..shader = shader; // 使用 paint 绘制矩形 canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } ``` 在这个示例中，首先创建了 `LinearGradient` 着色器，然后将其赋值给 `paint.shader`，最后用这个 `paint` 对象绘制矩形，矩形就会显示线性渐变效果。 ### 原理 着色器本质上是一种程序，它会根据特定算法计算每个像素的颜色值。在 Flutter 里，内置的着色器类会依据用户设定的参数（如颜色、起始点、结束点等）生成对应的着色器程序，绘制时，Flutter 会调用这个程序计算每个像素的颜色，从而实现特殊的视觉效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值