Flutter动态主题颜色插件dynamic_color的使用
Flutter动态主题颜色插件dynamic_color的使用
介绍
dynamic_color
是一个Flutter包,它基于平台的动态颜色实现创建Material颜色方案。目前支持的平台有:
- Android S+: 用户壁纸颜色
- 对于从内容颜色生成的颜色方案,可以使用
ColorScheme.fromImageProvider
- 对于从内容颜色生成的颜色方案,可以使用
- Linux: GTK+ 主题的
@theme_selected_bg_color
- macOS: 应用强调色
- Windows: 强调色或窗口/玻璃颜色
该包还支持颜色和颜色方案的协调化。
开始使用
添加依赖
在你的项目中添加 dynamic_color
包:
flutter pub add dynamic_color
导入包
在Dart文件中导入 dynamic_color
包:
import 'package:dynamic_color/dynamic_color.dart';
功能特性
Builder Widget
DynamicColorBuilder
是一个状态管理小部件,它可以提供设备的动态颜色,以光亮和黑暗模式的 ColorScheme
形式呈现。
DynamicColorBuilder(
builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
return ...;
}
),
插件
DynamicColorBuilder
内部使用插件与操作系统进行通信。
颜色和颜色方案协调化
协调化使得向应用程序中添加新颜色更加无缝,通过自动调整色调和色度,使产品的颜色与用户颜色更协调。
Color color = Colors.red;
// 调整 [color] 的色调,使其接近颜色方案的主要颜色。这保留了颜色的可识别性,同时与用户的动态颜色协调。
harmonizedColor = color.harmonizeWith(colorScheme.primary);
// 对内置语义颜色进行同样的操作
harmonizedColorScheme = colorScheme.harmonized();
更多细节可以参考 harmonization.dart,并了解 Material 3 网站上的自定义颜色和协调化。
示例代码
以下是一个完整的示例,展示了如何使用 dynamic_color
包来获取动态颜色、创建协调化的颜色方案以及协调自定义颜色。
import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatelessWidget {
const ExampleApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DynamicColorBuilder(
builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
final lightColorScheme = lightDynamic ?? ColorScheme.light();
final darkColorScheme = darkDynamic ?? ColorScheme.dark();
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorScheme: lightColorScheme,
),
darkTheme: ThemeData(
useMaterial3: true,
colorScheme: darkColorScheme,
),
home: Scaffold(
appBar: AppBar(title: const Text('Dynamic Color Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Light Theme Primary Color: ${lightColorScheme.primary}'),
Text('Dark Theme Primary Color: ${darkColorScheme.primary}'),
],
),
),
),
);
},
);
}
}
运行示例应用
要运行示例应用,请执行以下命令:
cd example
flutter run
测试
为了测试 dynamic_color
包的功能,你可以使用 test_utils.dart
和 samples.dart
中提供的工具。
import 'package:dynamic_color/test_utils.dart';
import 'package:dynamic_color/samples.dart';
void main() {
// 每次测试前重置
setUp(() => DynamicColorTestingUtils.setMockDynamicColors());
testWidgets('Verify dynamic core palette is used', (WidgetTester tester) async {
DynamicColorTestingUtils.setMockDynamicColors(
corePalette: SampleCorePalettes.green,
);
// ...
});
}
更多测试示例可以参考 widget_test.dart。
开发
示例应用托管在 GitHub Pages 上。要更新它,请执行以下命令:
cd example
flutter build web
以上是 dynamic_color
包的详细介绍和使用方法,希望对你有所帮助!
更多关于Flutter动态主题颜色插件dynamic_color的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter动态主题颜色插件dynamic_color的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter应用中使用dynamic_color
插件来实现动态主题颜色切换的示例代码。这个插件允许你根据设备的系统主题(如浅色模式和深色模式)动态地改变应用的颜色主题。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加dynamic_color
插件的依赖:
dependencies:
flutter:
sdk: flutter
dynamic_color: ^x.y.z # 替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 初始化插件
在你的应用的入口文件(通常是main.dart
)中,初始化DynamicColor
插件并设置默认的主题颜色。
import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 初始化DynamicColor
DynamicColor.init(
defaultDarkColorScheme: ColorScheme.dark(
primary: Colors.blue,
secondary: Colors.amber,
background: Colors.grey[900],
surface: Colors.grey[850],
// 你可以继续设置其他颜色
),
defaultLightColorScheme: ColorScheme.light(
primary: Colors.blue,
secondary: Colors.amber,
background: Colors.white,
surface: Colors.grey[50],
// 你可以继续设置其他颜色
),
);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.from(
colorScheme: DynamicColor.colorScheme,
),
home: MyHomePage(),
);
}
}
3. 使用动态主题颜色
在你的应用中,你可以使用DynamicColor.colorScheme
来访问动态主题颜色。例如,在MyHomePage
中:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = DynamicColor.colorScheme;
return Scaffold(
appBar: AppBar(
title: Text('Dynamic Theme Example'),
backgroundColor: colorScheme.background,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: TextStyle(color: colorScheme.onBackground),
),
// 添加更多使用动态颜色的组件
],
),
),
);
}
}
4. 监听系统主题变化
如果你需要在系统主题变化时执行某些操作,可以使用DynamicColor.addListener
来监听主题变化:
void main() {
DynamicColor.addListener(() {
// 这里是主题变化后的回调逻辑
print('System theme changed: ${DynamicColor.isDarkMode}');
});
runApp(MyApp());
}
5. 完整示例
以下是一个完整的示例,将上述步骤整合在一起:
import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
void main() {
DynamicColor.addListener(() {
print('System theme changed: ${DynamicColor.isDarkMode}');
});
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
DynamicColor.init(
defaultDarkColorScheme: ColorScheme.dark(
primary: Colors.blue,
secondary: Colors.amber,
background: Colors.grey[900],
surface: Colors.grey[850],
),
defaultLightColorScheme: ColorScheme.light(
primary: Colors.blue,
secondary: Colors.amber,
background: Colors.white,
surface: Colors.grey[50],
),
);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.from(
colorScheme: DynamicColor.colorScheme,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = DynamicColor.colorScheme;
return Scaffold(
appBar: AppBar(
title: Text('Dynamic Theme Example'),
backgroundColor: colorScheme.background,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: TextStyle(color: colorScheme.onBackground),
),
],
),
),
);
}
}
这样,你的Flutter应用就可以根据系统主题动态地改变颜色主题了。希望这个示例对你有所帮助!