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

dynamic_theme

动态更改主题无烦恼

此插件用于在运行时更改主题并持久化该主题。

我写了一篇关于它的Medium文章，可以在这里查看！

Medium文章链接

在项目中引入

在pubspec.yaml文件中添加以下依赖：

dependencies:
  dynamic_theme: ^1.0.0

然后运行flutter pub get并导入它：

import 'package:dynamic_theme/dynamic_theme.dart';

如果需要对话框功能：

import 'package:dynamic_theme/theme_switcher_widgets.dart';

使用方法

将你的MaterialApp包裹成如下形式：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new DynamicTheme(
      defaultBrightness: Brightness.light, // 默认亮度
      data: (brightness) => new ThemeData(
        primarySwatch: Colors.indigo, // 主色调
        brightness: brightness, // 当前亮度
      ),
      themedWidgetBuilder: (context, theme) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: theme, // 应用的主题
          home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    );
  }
}

更改主题

可以通过以下方式更改主题：

void changeBrightness() {
  DynamicTheme.of(context).setBrightness(
      Theme.of(context).brightness == Brightness.dark 
          ? Brightness.light 
          : Brightness.dark);
}

void changeColor() {
  DynamicTheme.of(context).setThemeData(new ThemeData(
      primaryColor: Theme.of(context).primaryColor == Colors.indigo 
          ? Colors.red 
          : Colors.indigo));
}

当通过setBrightness更改亮度时，还会将其存储到共享偏好设置中。

其他特性

一个用于更改亮度的对话框小部件！

开始使用

有关如何开始使用Flutter的更多信息，请查阅我们的官方文档。

有关如何编辑包代码的帮助，请查阅官方文档。

完整示例代码

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

import 'package:dynamic_theme/dynamic_theme.dart';
import 'package:dynamic_theme/theme_switcher_widgets.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => ThemeData(
              primarySwatch: Colors.indigo,
              brightness: brightness,
            ),
        themedWidgetBuilder: (context, theme) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: theme,
            home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
        });
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Easy Theme"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: changeBrightness,
              child: const Text("Change brightness"),
            ),
            RaisedButton(
              onPressed: changeColor,
              child: const Text("Change color"),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: showChooser,
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.insert_drive_file), title: Text("Tab 1")),
          BottomNavigationBarItem(
              icon: Icon(Icons.show_chart), title: Text("Tab 2")),
        ],
      ),
    );
  }

  void showChooser() {
    showDialog<void>(
        context: context,
        builder: (context) {
          return BrightnessSwitcherDialog(
            onSelectedTheme: (brightness) {
              DynamicTheme.of(context).setBrightness(brightness);
            },
          );
        });
  }

  void changeBrightness() {
    DynamicTheme.of(context).setBrightness(
        Theme.of(context).brightness == Brightness.dark
            ? Brightness.light
            : Brightness.dark);
  }

  void changeColor() {
    DynamicTheme.of(context).setThemeData(ThemeData(
        primaryColor: Theme.of(context).primaryColor == Colors.indigo
            ? Colors.red
            : Colors.indigo));
  }
}