Flutter主题管理插件theme_manager_plus的使用

Flutter主题管理插件theme_manager_plus的使用

告别繁琐的颜色方案记忆！使用Theme Manager Plus，管理主题变得轻而易举。只需创建一个类来定义浅色和深色主题，调整所需的颜色和样式，即可享受流畅且现代化的应用体验。不再头疼，只有轻松高效的主题管理！

开始使用

首先，在你的pubspec.yaml文件中添加theme_manager_plus作为依赖项。

theme_manager_plus: ^[version]

创建一个自定义类，定义颜色和样式，并注入这些值。例如：

class AppTheme {
  Color? backgroundColor;
  TextStyle? heading;
  TextStyle? subheading;

  AppTheme({this.backgroundColor, this.heading, this.subheading});
}

将你的MaterialApp包装在ThemeManagerWrapper中，并设置当前主题为初始主题。

home: ThemeManagerPlus<AppTheme>(
  currentTheme: lightTheme,
  darkTheme: DarkTheme,
  lightTheme: lightTheme,
  child: MyApp(),
);

从主题中访问数据：

context.themeOf<AppTheme>()?.backgroundColor

注意： 将类名替换为你自己的自定义类名。

更改当前主题：

context.changeCurrentTheme<AppTheme>();

检查当前主题是否为深色主题：

bool isDarkMode = context.isDarkMode<AppTheme>();

完整示例

以下是一个完整的示例代码，展示了如何使用theme_manager_plus插件。

import 'package:example/app_theme_color.dart';
import 'package:example/theme_model.dart';
import 'package:flutter/material.dart';
import 'package:theme_manager_plus/theme_manager_plus.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: ThemeManagerPlus<AppTheme>(
        currentTheme: DarkTheme,
        darkTheme: DarkTheme,
        lightTheme: LightTheme,
        child: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool switchValue = false;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.themeOf<AppTheme>()?.backgroundColor,
      appBar: AppBar(
        backgroundColor: context.themeOf<AppTheme>()?.backgroundColor,
        title: Text(
          widget.title,
          style: context.themeOf<AppTheme>()?.heading,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Switch(
              value: context.isDarkMode<AppTheme>(),
              onChanged: (value) {
                context.changeCurrentTheme<AppTheme>();
              },
              activeColor: Colors.blue,
            ),
            Text(
              'You have pushed the button this many times:',
              style: context.themeOf<AppTheme>()?.heading,
            ),
            Text(
              '$_counter',
              style: context.themeOf<AppTheme>()?.heading,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class SeconScreen extends StatelessWidget {
  String myName;
  SeconScreen({required this.myName});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Text("${myName}"),
        ),
      ),
    );
  }
}