Flutter动态主题颜色插件dynamic_color的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

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.dartsamples.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

1 回复

更多关于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应用就可以根据系统主题动态地改变颜色主题了。希望这个示例对你有所帮助!

回到顶部