Flutter主题切换插件yako_theme_switch的使用

Flutter主题切换插件yako_theme_switch的使用

Yako Theme Switch 是一个用于在应用程序中轻松切换主题的插件。它提供了一个漂亮的开关组件来改变应用的主题。

展示动画

安装

首先，在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  yako_theme_switch: ^1.0.0

然后运行 flutter pub get 来安装该包。

基本用法

以下是一个基本示例，展示如何使用 YakoThemeSwitch 组件：

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  ThemeMode themeMode = ThemeMode.light;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: themeMode,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              YakoThemeSwitch(
                enabled: themeMode == ThemeMode.light,
                onChanged: ({bool? changed}) {
                  if (changed != null) {
                    setState(() {
                      themeMode = changed ? ThemeMode.light : ThemeMode.dark;
                    });
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

高级用法

除了基本用法外，你还可以自定义 YakoThemeSwitch 的外观和行为。例如，你可以设置宽度、背景颜色、切换颜色等属性。

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  ThemeMode themeMode = ThemeMode.light;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: themeMode,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              YakoThemeSwitch(
                // 是否启用（根据当前主题模式）
                enabled: themeMode == ThemeMode.light,
                // 切换主题时的回调函数
                onChanged: ({bool? changed}) {
                  if (changed != null) {
                    setState(() {
                      themeMode = changed ? ThemeMode.light : ThemeMode.dark;
                    });
                  }
                },
                // 自定义宽度
                width: 50,
                // 启用时的背景颜色
                enabledBackgroundColor: Colors.blue,
                // 禁用时的背景颜色
                disabledBackgroundColor: Colors.red,
                // 启用时的切换颜色
                enabledToggleColor: Colors.white,
                // 禁用时的切换颜色
                disabledToggleColor: Colors.white,
                // 动画持续时间
                animationDuration: const Duration(milliseconds: 300),
                // 启用时的切换圆角半径
                enabledToggleBorderRadius: 8,
              ),
            ],
          ),
        ),
      ),
    );
  }
}