Flutter实现Monet莫奈取色

夏沫花火zzz🌙 (Muska_Ami) Lv4

Flutter 的 Material Design 3 居然没自带 Monet 取色,这就比较难受

添加依赖包

需要用到的是 dynamic_color

1
flutter pub add dynamic_color

根据官方说明,各个平台取色方式如下:

Android S+: 用户壁纸颜色
Linux: GTK+ 主题的 @theme_selected_bg_color
macOS: 应用程序的 accent color
Windows: accent color 或者 window/glass color

修改入口文件

修改你的 main.dart ,一个完整的示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';

void main() async {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// 默认主题色种子
static const _defaultColorSeed = Colors.blueAccent;

// 根组件
@override
Widget build(BuildContext context) {
Get.put(ProgressbarController());
// Monet 取色
return DynamicColorBuilder(
builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
ColorScheme lightColorScheme;
ColorScheme darkColorScheme;

if (lightDynamic != null && darkDynamic != null) {
// 亮色模式 Monet 取色
lightColorScheme = lightDynamic.harmonized();
// 暗色模式 Monet 取色
darkColorScheme = darkDynamic.harmonized();
} else {
// Fallback 颜色,当不支持 Monet 取色的时候使用
lightColorScheme = ColorScheme.fromSeed(
seedColor: _defaultColorSeed,
);
darkColorScheme = ColorScheme.fromSeed(
seedColor: _defaultColorSeed,
brightness: Brightness.dark,
);
}
// 覆盖取色后的颜色可以用 ColorScheme.copyWith(); 方法
// lightColorScheme.copyWith(secondary: Color.blue);

return GetMaterialApp(
title: 'Monet Example',
// 亮色模式主题,直接调用获取到的 ColorScheme
theme: ThemeData(
useMaterial3: true,
colorScheme: lightColorScheme,
// ...
),
// 暗色模式主题,同上
darkTheme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorScheme: darkColorScheme,
// ...
),
// 设置主题跟随系统
themeMode: ThemeMode.system,
// ...
);
},
);
}
}

接下来,热重启应用程序即可看到效果~

  • 标题: Flutter实现Monet莫奈取色
  • 作者: 夏沫花火zzz🌙 (Muska_Ami)
  • 创建于 : 2024-08-28 22:45:30
  • 更新于 : 2024-10-03 16:39:27
  • 链接: https://blog.1l1.icu/2024/08/28/flutter-shi-xian-monet-mo-nai-qu-se/
  • 版权声明: 本文章采用 CC BY-SA 4.0 进行许可。
 评论
此页目录
Flutter实现Monet莫奈取色