Flutter主题定制插件elegant_theme的使用

特性

轻松管理您的应用程序主题
在提供的主题之间切换

开始使用

TODO: 列出先决条件并提供或指向如何开始使用该软件包的信息。

使用方法

import 'package:elegant_theme/elegant_theme.dart';
import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    /// 创建ElegantTheme
    return ElegantTheme(
      themes: [
        // 使用ThemeData
        ElegantThemeData.fromThemeData(name: "ThemeData", description: "My Elegant ThemeData", light: ThemeData.light(), dark: ThemeData.light()),

        // 使用ColorScheme
        ElegantThemeData.fromColorScheme(
          name: "Color Scheme",
          lightColorScheme: ColorScheme.fromSwatch(), // 设置为浅色主题
          darkColorScheme: ColorScheme.fromSwatch(), // 设置为深色主题
        ),

        // 使用Material3: 默认情况下useMaterial3为true
        ElegantThemeData.fromFlexScheme(name: "FlexScheme1", flexScheme: FlexScheme.aquaBlue),
        ElegantThemeData.fromFlexScheme(name: "FlexScheme2", flexScheme: FlexScheme.aquaBlue, useMaterial3: true),
      ],
      builder: (context, theme, themeMode) {
        /// 将ElegantTheme设置为您的应用主题
        return MaterialApp(
          title: 'Elegant Theme 示例',
          debugShowCheckedModeBanner: false,
          theme: theme,
          themeMode: themeMode,
          home: const MyHomePage(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("主页"),
        centerTitle: true,
      ),
      body: const Center(
        child: ElegantDemoPage(),
      ),
    );
  }
}

/// 示例
/// 更改到下一个主题
class ElegantDemoPage extends StatelessWidget {
  const ElegantDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("更改主题页面"),
        centerTitle: true,
      ),
      body: Center(
        child: Wrap(
          children: [
            ElevatedButton(
              onPressed: () {
                /// 更改为下一个主题
                ElegantTheme.nextTheme(context);
              },
              child: const Text("下一个主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 更改使用上下文
                context.nextTheme();
              },
              child: const Text("下一个主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 设置为暗色主题模式
                ElegantTheme.switchToDarkThemeMode(context);
              },
              child: const Text("暗色主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 更改使用上下文
                context.switchToDarkThemeMode();
              },
              child: const Text("暗色主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 设置为亮色主题模式
                ElegantTheme.switchToLightThemeMode(context);
              },
              child: const Text("亮色主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 更改使用上下文
                context.switchToLightThemeMode();
              },
              child: const Text("亮色主题"),
            ),
            ElevatedButton(
              onPressed: () {
                /// 更改为名为[FlexScheme1]的主题，如构造函数中声明
                /// ElegantThemeData.fromFlexScheme(name: "FlexScheme1", flexScheme: FlexScheme.aquaBlue),
                context.switchToThemeByName("FlexScheme1");
              },
              child: const Text("通过名称切换主题"),
            ),
          ],
        ),
      ),
    );
  }
}

使用BuildContext

// 现在可以调用
context.elegantTheme; // 返回ElegantTheme，等同于ElegantTheme.of(context)

context.elegantThemeData; // 返回ThemeData

context.elegantThemeMode; // 返回ThemeMode

context.nextTheme(); // 更改为列表中的下一个优雅主题

context.switchToThemeByName(String themeName)

context.switchThemeMode()

context.switchToSystemThemeMode()

context.switchToDarkThemeMode()

context.switchToLightThemeMode()

elegantThemeNameAndDescriptionRecordList

currentElegantThemeNameAndDescriptionRecord