Flutter主题管理插件at_theme_flutter的使用

Flutter主题管理插件at_theme_flutter的使用

at_theme_flutter 包为Flutter开发者提供了在他们的atPlatform应用中添加主题切换功能的能力。该开源包用Dart编写，支持Flutter，并遵循atPlatform的去中心化边缘计算模型。以下是其主要特性：

• 通过个人数据存储实现数据访问的加密控制
• 不需要应用程序后端
• 端到端加密，只有数据所有者拥有密钥
• 私有且无监控的连接
• 能够选择并切换主题

我们称之为“翻转互联网”，即赋予人们对其数据访问的控制权。更多详情可参阅 atPlatform概述。

开始使用

1. 快速开始 - 使用at_app生成一个骨架应用

该包包含了一个在 Example 目录下的工作示例应用，你可以使用 at_app create 命令在四个步骤内创建一个个性化的副本。

$ flutter pub global activate at_app 
$ at_app create --sample=<package ID> <app name> 
$ cd <app name>
$ flutter run

注意：

1. 只需运行一次 flutter pub global activate
2. 对于Windows系统，使用 at_app.bat

2. 从GitHub克隆

你可以自由地从 GitHub仓库 克隆源码。其中的示例代码与 at_app 中使用的模板相同。

$ git clone https://github.com/atsign-foundation/at_widgets.git

3. 手动将包添加到项目中

有关如何手动将此包添加到项目的说明可以在 pub.dev 上找到。

如何工作

该包提供了一个UI屏幕来展示主题选择、预览和应用。它还支持自定义主题数据。

设置

主题服务需要初始化。必须指定根域。

initializeThemeService(rootDomain: AtEnv.rootDomain);

使用

获取保存的主题

AppTheme? appTheme = await getThemeData();

使用自定义主题

var appTheme = AppTheme.from();
var result = await setAppTheme(appTheme);

开源使用和贡献

这是一个开源代码，所以你可以自由使用它，提出修改建议或增强请求，甚至可以创建自己的版本。详细的指导请参阅 CONTRIBUTING.md。

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用at_theme_flutter插件。

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

void main() async {
  // 初始化主题服务
  initializeThemeService(rootDomain: AtEnv.rootDomain);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Theme Switcher'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  AppTheme? _currentTheme;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 获取当前主题
    getThemeData().then((value) {
      setState(() {
        _currentTheme = value;
      });
    });
  }

  void _changeTheme(AppTheme theme) async {
    // 切换主题
    var result = await setAppTheme(theme);
    if (result) {
      setState(() {
        _currentTheme = theme;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Current Theme: ${_currentTheme?.name ?? "None"}',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: () {
                // 切换到浅色主题
                _changeTheme(AppTheme.light());
              },
              child: Text('Switch to Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                // 切换到深色主题
                _changeTheme(AppTheme.dark());
              },
              child: Text('Switch to Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}