Flutter动态主题切换插件dynamic_themer的使用

简介

DynamicThemer 是一个用于在 Flutter 应用中实现动态主题切换的包。它支持基于用户操作、一天中的时间或系统偏好设置进行主题切换，为开发者提供了创建具有吸引力和视觉效果的应用程序的直观方式。

特性

1. 动态亮暗模式切换
2. 基于时间的主题触发（例如：白天亮模式，晚上暗模式）
3. 动态渐变背景
4. 文本、按钮和其他 UI 组件的主题定制
5. 基于系统偏好设置的主题切换
6. 轻松集成自定义小部件：
   • DynamicThemeWrapper
   • ThemeSwitcher
   • DynamicGradientBackground

示例应用（时钟）

使用方法

将您的应用包装在 DynamicThemeWrapper 中，并使用提供的小部件来实现动态主题切换。

示例代码

以下是一个基本实现：

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicThemeWrapper(
      // 定义亮色主题（可选，默认使用包中默认亮色主题）
      lightTheme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.blue, // 亮模式下的 AppBar 背景颜色
          foregroundColor: Color.fromARGB(228, 255, 255, 255), // 文本颜色
          elevation: 0, // 去除阴影以保持平面外观
        ),
        textTheme: const TextTheme(
          bodyLarge: TextStyle(color: Color.fromARGB(228, 255, 255, 255)),
        ),
      ),
      // 定义暗色主题（可选，默认使用包中默认暗色主题）
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.black, // 暗模式下的 AppBar 背景颜色
          foregroundColor: Color.fromARGB(255, 133, 120, 206), // 文本颜色
          elevation: 0, // 去除阴影以保持平面外观
        ),
        textTheme: const TextTheme(
          bodyLarge: TextStyle(color: Color.fromARGB(255, 175, 161, 255)),
        ),
      ),
      // 定义亮色渐变主题（可选，默认使用包中默认亮色渐变主题）
      lightGradient: const LinearGradient(
        colors: [Colors.blue, Colors.lightBlueAccent],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      // 定义暗色渐变主题（可选，默认使用包中默认暗色渐变主题）
      darkGradient: const LinearGradient(
        colors: [Color(0xff0D324D), Color(0xff7F5A83)],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      // 是否启用系统主题（设为 true 将关闭自动时间切换功能）
      setSystemPreferenceTheme: false,
      child: MyApp(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicGradientBackground(
      child: Scaffold(
        appBar: AppBar(
          title: Text('动态主题切换'),
          actions: [ThemeSwitcher()], // 添加主题切换按钮
        ),
        body: Center(
          child: Text('Hello, 动态主题!', style: TextStyle(fontSize: 24)),
        ),
      ),
    );
  }
}

小部件详解

1. DynamicThemeWrapper

包装您的应用以启用动态主题切换。

DynamicThemeWrapper(
  lightTheme: ThemeData(...), // 亮色主题
  darkTheme: ThemeData(...), // 暗色主题
  lightGradient: LinearGradient(...), // 亮色渐变
  darkGradient: LinearGradient(...), // 暗色渐变
  setSystemPreferenceTheme: false, // 是否启用系统主题
  child: MyApp(), // 子组件
)

2. ThemeSwitcher

添加一个主题切换按钮到您的 UI。

ThemeSwitcher()

3. DynamicGradientBackground

为您的 UI 添加动态渐变背景。

DynamicGradientBackground(
  child: YourWidget(),
)

示例项目设置（本地使用）

要将 DynamicThemer 包本地化到您的示例项目中，请按照以下步骤操作：

1. 克隆仓库

克隆包含该包的仓库：

git clone https://github.com/CodArtist/DynamicThemer.git

2. 设置示例项目

仓库结构应如下所示：

DynamicThemer/
├── lib/
│   ├── dynamic_theme_provider.dart
│   ├── theme_models.dart
│   ├── dynamic_themer.dart
│   ├── theme_switcher_widget.dart
│   ├── dynamic_gradient_widget.dart
├── pubspec.yaml
├── example/
│   ├── lib/
│   │   ├── main.dart
│   ├── pubspec.yaml

3. 运行 flutter pub get

在主目录下运行：

cd DynamicThemer
flutter pub get

4. 运行示例项目

导航到 example 文件夹并运行应用程序：

cd example
flutter run