Flutter主题管理插件acme_theme的使用

关于

acme_theme 是一个旨在提供一种简单方式来使用从 Acme Theme Builder 提取的主题和组件的包。通过这个插件，您可以轻松地将自定义主题集成到您的 Flutter 应用中。

开始使用

下载 Acme Theme Builder

首先，您需要从以下应用商店之一下载 Acme Theme Builder：

• App Store
• Microsoft Store
• Play Store

创建并导出主题

使用 Acme Theme Builder 创建您所需的主题和组件，并将其导出为 JSON 文件。然后，您可以使用 acme_theme 包在您的 Flutter 应用中导入该主题。

示例代码

以下是使用 acme_theme 插件的一个完整示例 Demo：

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

void main() {
  runApp(
    SampleThemeApp(
      themeMode: ThemeMode.light,
      themeData: ThemeData.light(useMaterial3: true),
      darkThemeData: ThemeData.dark(useMaterial3: true),
      onIconPressed: () {},
      isOnThemeBuilder: false,
    ),
  );
}

class SampleThemeApp extends StatelessWidget {
  final ThemeMode themeMode;
  final ThemeData? themeData;
  final ThemeData? darkThemeData;
  final VoidCallback onIconPressed;
  final bool isOnThemeBuilder;

  const SampleThemeApp({
    super.key,
    required this.themeMode,
    required this.themeData,
    required this.darkThemeData,
    required this.onIconPressed,
    required this.isOnThemeBuilder,
  });

  @override
  Widget build(BuildContext context) {
    return ThemeScope(
      notifier: ThemeNotifier(),
      child: Builder(
        builder: (context) {
          return AcmeThemeScope<String>.asset(
            path: ThemeScope.of(context).notifier.assetPath,
            customColorsConverterCreator: BrandColorsConverter.new,
            builder: (context, theme) {
              return MaterialApp(
                debugShowCheckedModeBanner: false,
                title: 'Flutter Theme Example',
                theme: isOnThemeBuilder ? themeData : theme.lightTheme,
                darkTheme: isOnThemeBuilder ? darkThemeData : theme.darkTheme,
                themeMode: isOnThemeBuilder ? themeMode : theme.themeMode,
                home: MyHomePage(),
              );
            },
          );
        },
      ),
    );
  }
}

class ThemeNotifier extends ChangeNotifier {
  String _assetPath = 'assets/example-theme.acme';

  String get assetPath => _assetPath;

  void changeAsset(String assetPath) {
    if (_assetPath != assetPath) {
      _assetPath = assetPath;
      notifyListeners();
    }
  }
}

class ThemeScope extends InheritedNotifier<ThemeNotifier> {
  const ThemeScope({
    super.key,
    required super.notifier,
    required super.child,
  });

  static ThemeNotifier of(BuildContext context) {
    final scope = context.dependOnInheritedWidgetOfExactType<ThemeScope>();
    assert(scope != null);
    return scope!.notifier!;
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Acme Theme Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Hello Acme Theme!',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

解释

1. 导入必要的包：确保导入了 acme_theme 和 flutter/material.dart。
2. 初始化应用：在 main 函数中调用 runApp 并传入 SampleThemeApp 实例。
3. 配置主题：在 SampleThemeApp 中设置主题模式、亮色主题、暗色主题等。
4. 主题范围：使用 ThemeScope 和 AcmeThemeScope 来管理和应用主题。
5. 主页面：创建一个简单的主页 (MyHomePage) 来展示如何使用主题。

通过这种方式，您可以轻松地在 Flutter 应用中集成和切换不同的主题。希望这个示例能帮助您更好地理解和使用 acme_theme 插件！