Flutter主题切换插件simple_theme

Flutter主题切换插件simple_theme_switcher的使用

一个轻量级的Flutter包，用于轻松地在浅色和深色主题之间切换，并且只需少量设置。此插件简化了主题管理，使开发人员能够高效地切换主题。

功能

简单直观的主题管理。
在浅色和深色主题之间切换。
需要的配置最少。

安装

在pubspec.yaml文件中添加simple_theme_switcher依赖项：

dependencies:
  simple_theme_switcher: ^latest

运行以下命令：

flutter pub get

使用方法

第一步：用`STMaterialApp`包装你的应用

在main.dart文件中，将MaterialApp替换为STMaterialApp：

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

void main() {
  runApp(const STMaterialApp(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return const HomeScreen();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(
          '主题切换示例',
          style: TextStyle(
            color: Theme.of(context).colorScheme.onPrimaryContainer,
          ),
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final themeManager = ThemeManager();
            themeManager.toggleTheme(
              themeManager.currentThemeMode == AppThemeMode.light
                  ? AppThemeMode.dark
                  : AppThemeMode.light,
              seedColor: Colors.yellow, // 可选的种子颜色
            );
          },
          child: const Text('切换主题'),
        ),
      ),
    );
  }
}

重要提示

不要同时使用MaterialApp和STMaterialApp。这会导致冲突。
只需将MaterialApp替换为STMaterialApp并传递任何所需的参数即可。

API

`STMaterialApp`

管理主题切换的组件。

const STMaterialApp({required Widget child});

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

itying888 1楼•4 天前

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

当然，以下是如何在Flutter应用中使用simple_theme_switcher插件来实现主题切换的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了simple_theme_switcher依赖：

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

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

接下来，我们来看一个完整的示例，展示如何使用simple_theme_switcher来实现主题切换功能。

1. 定义主题数据

在main.dart文件中，首先定义你的主题数据：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    // 其他主题配置
  );

  final ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.indigo,
    // 其他主题配置
  );

  @override
  Widget build(BuildContext context) {
    return SimpleThemeSwitcher(
      initialTheme: lightTheme, // 初始主题
      themes: {
        'Light Theme': lightTheme,
        'Dark Theme': darkTheme,
      },
      builder: (context, theme) {
        return MaterialApp(
          title: 'Theme Switcher Demo',
          theme: theme,
          home: MyHomePage(),
        );
      },
    );
  }
}

2. 创建主页面

接下来，在你的主页面MyHomePage中，添加一个按钮来切换主题：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Switcher Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${Theme.of(context).brightness == Brightness.light ? 'Light' : 'Dark'}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换主题
                final SimpleThemeSwitcherState themeSwitcherState =
                    context.findAncestorStateOfType<SimpleThemeSwitcherState>()!;
                themeSwitcherState.switchToTheme('Dark Theme');
              },
              child: Text('Switch to Dark Theme'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                // 切换主题
                final SimpleThemeSwitcherState themeSwitcherState =
                    context.findAncestorStateOfType<SimpleThemeSwitcherState>()!;
                themeSwitcherState.switchToTheme('Light Theme');
              },
              child: Text('Switch to Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

现在，你可以运行你的Flutter应用，通过点击按钮来在亮模式和暗模式之间切换主题。

总结

以上代码展示了如何使用simple_theme_switcher插件在Flutter应用中实现主题切换功能。SimpleThemeSwitcher组件封装了主题管理的逻辑，使你可以轻松地切换主题。在主页面中，通过context.findAncestorStateOfType<SimpleThemeSwitcherState>()获取SimpleThemeSwitcher的状态，然后调用switchToTheme方法来切换主题。

Flutter主题切换插件simple_theme_switcher的使用