Flutter主题颜色管理插件color_theme_provider的使用

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

Flutter主题颜色管理插件color_theme_provider的使用

1. 插件简介

color_theme_provider 是一个用于在Flutter应用中管理自定义主题颜色的插件。它允许你定义自己的颜色方案，而不依赖于Material Design或Cupertino设计令牌。通过这个插件，你可以轻松地为你的应用创建和切换浅色和深色模式的主题。

2. 主要特性

  • 自定义颜色属性：你可以定义自己的颜色属性，而不需要依赖Google的ColorScheme或Apple的CupertinoThemeData。
  • 自动切换模式：当设备处于浅色模式时，插件会自动使用theme参数；当设备处于深色模式时，插件会自动使用darkTheme参数。
  • 作用域管理：主题在 widget 树中正确作用域化，可以在需要的地方访问。

3. 示例图片

示例图片

4. 使用步骤

4.1 安装插件

你可以通过以下两种方式安装 color_theme_provider 插件：

  • 使用 flutter pub add 命令：

    flutter pub add color_theme_provider

  • 手动添加到 pubspec.yaml 文件：

    dependencies:
  color_theme_provider: 1.1.1
4.2 定义自定义主题

为了创建自己的主题，你需要创建一个类来扩展或实现 ColorTheme 抽象类，并定义所需的颜色属性。例如：

import 'package:color_theme_provider/color_theme_provider.dart';
import 'package:flutter/material.dart';

// 定义抽象类 MyTheme，继承自 ColorTheme
abstract class MyTheme implements ColorTheme {
  Color get mainColor;
  Color get containerColor;
  Color get backgroundColor;
  Color get textColor;
}

// 实现 LightMyTheme 类
final class LightMyTheme implements MyTheme {
  [@override](/user/override)
  final Color mainColor = const Color(0xFF7BD3EA);

  [@override](/user/override)
  final Color containerColor = const Color(0xFFA1EEBD);

  [@override](/user/override)
  final Color backgroundColor = const Color(0xFFFCFCFC);

  [@override](/user/override)
  final Color textColor = Colors.black;
}

// 实现 DarkMyTheme 类
final class DarkMyTheme implements MyTheme {
  [@override](/user/override)
  final Color mainColor = const Color(0xFF7BD3EA);

  [@override](/user/override)
  final Color containerColor = const Color(0xFF007F73);

  [@override](/user/override)
  final Color backgroundColor = const Color(0xFF2C2C2C);

  [@override](/user/override)
  final Color textColor = Colors.white;
}
4.3 使用 ColorThemeProvider 包裹应用

为了让整个应用能够访问自定义主题，你需要将 ColorThemeProvider 包裹在应用的根部。例如：

void main() {
  runApp(
    ColorThemeProvider(
      theme: LightMyTheme(),  // 浅色模式主题
      darkTheme: DarkMyTheme(),  // 深色模式主题
      child: const MyApp(),
    ),
  );
}
4.4 在 widget 中访问主题

在 widget 树中的任何地方，你都可以通过 BuildContext 访问当前的主题。使用 context.colorTheme<MyTheme>() 方法可以获取当前的主题实例，并访问其属性。例如：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取当前主题
    final theme = context.colorTheme<MyTheme>();

    return Scaffold(
      backgroundColor: theme.backgroundColor,  // 设置背景颜色
      body: Padding(
        padding: const EdgeInsets.only(top: 72.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: Text(
                'Color Theme Demo',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 48.0,
                  height: 1.1,
                  wordSpacing: 0.9,
                  fontWeight: FontWeight.w700,
                  color: theme.textColor,  // 设置文本颜色
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.containerColor,  // 设置容器颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Container color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.mainColor,  // 设置主颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Main color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.backgroundColor,  // 设置背景颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Background color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
4.5 动态切换主题

你可以通过 ColorThemeManager 实例动态地更改应用的主题。首先，获取 ColorThemeManager 实例，然后调用 setTheme 或 setDarkTheme 方法来更新浅色或深色模式的主题。例如：

void changeTheme(BuildContext context, MyTheme newTheme) {
  final colorThemeManager = context.colorThemeManager<MyTheme>();

  // 更新当前浅色主题
  colorThemeManager.setTheme(newTheme);

  // 更新当前深色主题
  colorThemeManager.setDarkTheme(newTheme);

  // 检查当前是浅色模式还是深色模式
  // [Brightness.dark] 表示深色模式，[Brightness.light] 表示浅色模式
  colorThemeManager.getCurrentMode();
}

5. 完整示例代码

以下是一个完整的示例代码，展示了如何使用 color_theme_provider 插件来管理应用的主题颜色：

import 'package:color_theme_provider/color_theme_provider.dart';
import 'package:flutter/material.dart';

// 定义抽象类 MyTheme，继承自 ColorTheme
abstract class MyTheme implements ColorTheme {
  Color get mainColor;
  Color get containerColor;
  Color get backgroundColor;
  Color get textColor;
}

// 实现 LightMyTheme 类
final class LightMyTheme implements MyTheme {
  [@override](/user/override)
  final Color mainColor = const Color(0xFF7BD3EA);

  [@override](/user/override)
  final Color containerColor = const Color(0xFFA1EEBD);

  [@override](/user/override)
  final Color backgroundColor = const Color(0xFFFCFCFC);

  [@override](/user/override)
  final Color textColor = Colors.black;
}

// 实现 DarkMyTheme 类
final class DarkMyTheme implements MyTheme {
  [@override](/user/override)
  final Color mainColor = const Color(0xFF7BD3EA);

  [@override](/user/override)
  final Color containerColor = const Color(0xFF007F73);

  [@override](/user/override)
  final Color backgroundColor = const Color(0xFF2C2C2C);

  [@override](/user/override)
  final Color textColor = Colors.white;
}

void main() {
  runApp(
    ColorThemeProvider(
      theme: LightMyTheme(),  // 浅色模式主题
      darkTheme: DarkMyTheme(),  // 深色模式主题
      child: const MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取当前主题
    final theme = context.colorTheme<MyTheme>();

    return Scaffold(
      backgroundColor: theme.backgroundColor,  // 设置背景颜色
      body: Padding(
        padding: const EdgeInsets.only(top: 72.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: Text(
                'Color Theme Demo',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 48.0,
                  height: 1.1,
                  wordSpacing: 0.9,
                  fontWeight: FontWeight.w700,
                  color: theme.textColor,  // 设置文本颜色
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.containerColor,  // 设置容器颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Container color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.mainColor,  // 设置主颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Main color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 24.0,
                right: 24.0,
                top: 24.0,
              ),
              child: Container(
                height: 100,
                decoration: BoxDecoration(
                    color: theme.backgroundColor,  // 设置背景颜色
                    borderRadius: BorderRadius.circular(24.0)),
                child: Center(
                  child: Text(
                    'Background color',
                    style: TextStyle(
                      color: theme.textColor,  // 设置文本颜色
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void changeTheme(BuildContext context, MyTheme newTheme) {
  final colorThemeManager = context.colorThemeManager<MyTheme>();

  // 更新当前浅色主题
  colorThemeManager.setTheme(newTheme);

  // 更新当前深色主题
  colorThemeManager.setDarkTheme(newTheme);

  // 检查当前是浅色模式还是深色模式
  // [Brightness.dark] 表示深色模式，[Brightness.light] 表示浅色模式
  colorThemeManager.getCurrentMode();
}

更多关于Flutter主题颜色管理插件color_theme_provider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter主题颜色管理插件color_theme_provider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用color_theme_provider插件进行主题颜色管理的示例代码。color_theme_provider是一个用于在Flutter应用中轻松管理主题颜色的插件。

首先，确保你的pubspec.yaml文件中包含了color_theme_provider的依赖：

dependencies:
  flutter:
    sdk: flutter
  color_theme_provider: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

1. 创建主题颜色

首先，我们需要定义一些主题颜色。例如，我们可以创建一个colors.dart文件来定义这些颜色：

// colors.dart
import 'package:flutter/material.dart';

final LightThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  primaryColor: Colors.blue[700]!,
  accentColor: Colors.amber[600]!,
  scaffoldBackgroundColor: Colors.white,
  // 添加其他需要的颜色定义
);

final DarkThemeData darkTheme = ThemeData.dark().copyWith(
  scaffoldBackgroundColor: Colors.grey[900]!,
  // 添加其他需要的颜色定义
);

2. 使用ColorThemeProvider包裹应用

接下来，在main.dart文件中，使用ColorThemeProvider来包裹你的应用，并提供初始主题：

// main.dart
import 'package:flutter/material.dart';
import 'package:color_theme_provider/color_theme_provider.dart';
import 'colors.dart'; // 导入我们之前定义的颜色

void main() {
  runApp(
    ColorThemeProvider(
      initialColorTheme: ColorThemeData(
        lightTheme: lightTheme,
        darkTheme: darkTheme,
      ),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ColorTheme.of(context).brightness, // 从ColorThemeProvider获取当前主题模式
      theme: ColorTheme.of(context).theme, // 从ColorThemeProvider获取当前主题
      darkTheme: ColorTheme.of(context).darkTheme, // 可选，通常不需要手动设置，因为ColorThemeProvider已经管理
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Theme Provider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme Mode: ${ColorTheme.of(context).brightness == Brightness.light ? 'Light' : 'Dark'}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ColorTheme.of(context).setThemeMode(
                  ColorTheme.of(context).brightness == Brightness.light
                      ? ThemeMode.dark
                      : ThemeMode.light,
                );
              },
              child: Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用主题颜色

现在，你可以在你的应用中任何位置使用主题颜色。例如，在MyHomePage中，你可以看到我们已经在AppBar和Text组件中使用了主题颜色。你也可以在其他地方使用Theme.of(context)来获取当前主题的颜色，比如：

Container(
  color: Theme.of(context).primaryColor,
  child: Text(
    'Primary Color Text',
    style: TextStyle(color: Theme.of(context).accentColor),
  ),
)

总结

通过以上步骤，你已经成功地在你的Flutter应用中集成了color_theme_provider插件，并实现了主题颜色的管理。你可以根据需要扩展和自定义你的主题颜色，以及添加更多的逻辑来处理主题切换。

回到顶部