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

概述

tako_dynamic_theme 是一个用于在 Flutter 应用中实现动态主题切换的插件。通过此插件，您可以轻松地为应用添加多种主题，并允许用户在运行时切换这些主题。

示例效果

下图展示了 tako_dynamic_theme 插件的动态主题切换功能：

开始使用

1. 添加依赖

首先，在您的 pubspec.yaml 文件中添加 tako_dynamic_theme 依赖：

dependencies:
  flutter:
    sdk: flutter
  tako_dynamic_theme: x.y.z

然后运行以下命令以获取依赖：

flutter pub get

使用方法

包裹根部件

将您的应用包裹在 TakoDynamicThemeWidget 中，以便启用动态主题切换功能。您可以通过 themeMap 提供不同的主题，并设置默认主题（fallbackTheme）。

void main() {
  runApp(
    TakoDynamicThemeWidget(
      themeMap: {
        "light": ThemeData.light(), // 定义亮色主题
        "dark": ThemeData.dark(),   // 定义暗色主题
        "night": ThemeConfig.nightTheme, // 引入预定义的主题
      },
      fallbackTheme: ThemeData.light(), // 设置默认主题
      child: const MyApp(),
    ),
  );
}

切换主题

通过调用 TakoDynamicTheme.of(context).changeTheme() 方法来切换主题。例如，点击按钮后切换到“夜色”主题：

OutlinedButton(
  onPressed: () => TakoDynamicTheme.of(context).changeTheme(themeKey: "night"),
  child: const Text("切换到夜色主题"),
);

完整示例代码

以下是一个完整的示例代码，展示如何使用 tako_dynamic_theme 插件实现动态主题切换。

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

void main() {
  runApp(
    TakoDynamicThemeWidget(
      themeMap: {
        "light": ThemeData.light(), // 亮色主题
        "dark": ThemeData.dark(),   // 暗色主题
        "night": ThemeConfig.nightTheme, // 夜色主题
      },
      fallbackTheme: ThemeData.light(), // 默认主题
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 动态主题示例',
      theme: TakoDynamicTheme.of(context).themeData, // 动态主题数据
      home: Scaffold(
        appBar: AppBar(
          title: const Text("动态主题切换"),
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {},
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                    onPressed: () =>
                        TakoDynamicTheme.of(context).changeTheme(themeKey: "light"),
                    child: const Text("亮色主题"),
                  ),
                  ElevatedButton(
                    onPressed: () =>
                        TakoDynamicTheme.of(context).changeTheme(themeKey: "dark"),
                    child: const Text("暗色主题"),
                  ),
                  ElevatedButton(
                    onPressed: () =>
                        TakoDynamicTheme.of(context).changeTheme(themeKey: "night"),
                    child: const Text("夜色主题"),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text("普通按钮"),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    child: const Text("边框按钮"),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: const Text("文本按钮"),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Switch(value: true, onChanged: (value) {}),
                  Switch(value: false, onChanged: (value) {}),
                  Radio(value: 1, groupValue: 1, onChanged: (value) {}),
                  Radio(value: 0, groupValue: 1, onChanged: (value) {}),
                  Checkbox(value: true, onChanged: (value) {}),
                  Checkbox(value: false, onChanged: (value) {}),
                ],
              ),
              TextField(
                decoration: const InputDecoration(hintText: "输入框"),
              ),
              Slider(value: 0.5, onChanged: (value) {}),
            ],
          ),
        ),
      ),
    );
  }
}

运行示例代码

如果您想运行完整的示例代码，请按照以下步骤操作：

1. 克隆示例仓库：

   git clone https://github.com/wingstako/tako_dynamic_theme.git
   

2. 进入示例目录并运行：

   cd tako_dynamic_theme/example
   flutter run