Flutter数据同步界面插件 at_sync_ui_flutter 的使用

概述

at_sync_ui_flutter 是一个用于Flutter开发者的插件，旨在实现数据同步过程的UI指示器。该开源包由Dart编写，支持Flutter，并遵循去中心化、边缘计算模型，具有以下特性：

• 通过个人数据存储实现数据访问的加密控制
• 不需要应用后端
• 端到端加密，只有数据所有者拥有密钥
• 私有且无监控连接
• 显示同步进行中的视觉指示器

快速开始

有三种方法可以开始使用这个包。

1. 使用 at_app 快速生成骨架应用

$ 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仓库 克隆源代码。

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

3. 手动添加包到项目中

详细的手动添加步骤可以在 pub.dev 上找到。

如何工作

初始化

在初始化时，通常首先使用Onboarding小部件对atsign进行身份验证。

AtSyncUIService().init(
    appNavigator: navKey,
    style: _atSyncUIStyle,
    onSuccessCallback: _onSuccessCallback,
    onErrorCallback: _onErrorCallback,
);

可以选择：

• UI样式：Material或Cupertino
• 同步期间显示的覆盖类型：Dialog或Snackbar
• 成功和失败的回调函数
• 主要颜色、背景色、标签颜色等

使用示例

调用同步并显示选定的UI：

AtSyncUIService().sync(
    atSyncUIOverlay: AtSyncUIOverlay.snackbar,
);

监听同步状态变化：

AtSyncUIService().atSyncUIListener;

插件描述

该插件提供以下组件：

• AtSyncButton
• AtSyncIndicator
• AtSyncLinearProgressIndicator
• AtSyncText
• AtSyncDialog
• AtSyncSnackBar

组件使用示例

AtSyncButton

AtSyncButton(
    isLoading: isLoading,
    syncIndicatorColor: Colors.white,
    child: IconButton(
        icon: const Icon(Icons.android),
        onPressed: () {},
    ),
)

AtSyncIndicator

AtSyncIndicator(
    value: progress,
    color: _indicatorColor,
)

AtSyncLinearProgressIndicator

AtSyncLinearProgressIndicator(
    value: progress,
    color: _indicatorColor,
)

AtSyncText

AtSyncText(
    value: progress,
    child: const Text('completed'),
    indicatorColor: _indicatorColor,
)

AtSyncDialog

final dialog = material.AtSyncDialog(context: context);
dialog.show(message: 'Downloading ...');
dialog.update(value: _value, message: 'Downloading ...');
dialog.close();

AtSyncSnackBar

final snackBar = material.AtSyncSnackBar(context: context);
snackBar.show(message: 'Downloading ...');
snackBar.update(value: _value, message: 'Downloading ...');
snackBar.dismiss();

完整示例

下面是一个完整的示例应用，展示了如何集成和使用 at_sync_ui_flutter 包。

import 'dart:async';
import 'package:at_app_flutter/at_app_flutter.dart' show AtEnv;
import 'package:at_client_mobile/at_client_mobile.dart';
import 'package:at_onboarding_flutter/at_onboarding_flutter.dart'
    show AtOnboarding, AtOnboardingConfig, AtOnboardingResultStatus;
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart' show getApplicationSupportDirectory';

Future<void> main() async {
  await AtEnv.load();
  runApp(const MyApp());
}

Future<AtClientPreference> loadAtClientPreference() async {
  var dir = await getApplicationSupportDirectory();
  return AtClientPreference()
    ..rootDomain = AtEnv.rootDomain
    ..namespace = AtEnv.appNamespace
    ..hiveStoragePath = dir.path
    ..commitLogPath = dir.path
    ..isLocalStoreRequired = true;
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<AtClientPreference> futurePreference = loadAtClientPreference();
  AtClientPreference? atClientPreference;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: NavService.navKey,
      theme: ThemeData().copyWith(
        brightness: Brightness.light,
        primaryColor: const Color(0xFFf4533d),
        colorScheme: ThemeData.light().colorScheme.copyWith(
              primary: const Color(0xFFf4533d),
              surface: Colors.white,
            ),
        scaffoldBackgroundColor: Colors.white,
      ),
      darkTheme: ThemeData().copyWith(
        brightness: Brightness.dark,
        primaryColor: Colors.blue,
        colorScheme: ThemeData.dark().colorScheme.copyWith(
              primary: Colors.blue,
              surface: Colors.grey[850],
            ),
        scaffoldBackgroundColor: Colors.grey[850],
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('At Sync UI flutter example'),
          actions: <Widget>[
            IconButton(
              onPressed: () {
                // Toggle theme mode logic here
              },
              icon: Icon(
                Theme.of(context).brightness == Brightness.light
                    ? Icons.dark_mode_outlined
                    : Icons.light_mode_outlined,
              ),
            )
          ],
        ),
        body: Builder(
          builder: (context) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () async {
                    var preference = await futurePreference;
                    setState(() {
                      atClientPreference = preference;
                    });
                    if (context.mounted) {
                      final result = await AtOnboarding.onboard(
                        context: context,
                        config: AtOnboardingConfig(
                          atClientPreference: atClientPreference!,
                          domain: AtEnv.rootDomain,
                          rootEnvironment: AtEnv.rootEnvironment,
                          appAPIKey: AtEnv.appApiKey,
                        ),
                      );
                      switch (result.status) {
                        case AtOnboardingResultStatus.success:
                          // Navigate to next screen on success
                          break;
                        case AtOnboardingResultStatus.error:
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              backgroundColor: Colors.red,
                              content: Text('An error has occurred'),
                            ),
                          );
                          break;
                        case AtOnboardingResultStatus.cancel:
                          break;
                      }
                    }
                  },
                  child: const Text('Onboard an atSign'),
                ),
                const SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () async {
                    var preference = await futurePreference;
                    atClientPreference = preference;
                    if (context.mounted) {
                      await AtOnboarding.reset(
                        context: context,
                        config: AtOnboardingConfig(
                          atClientPreference: atClientPreference!,
                          domain: AtEnv.rootDomain,
                          rootEnvironment: AtEnv.rootEnvironment,
                          appAPIKey: AtEnv.appApiKey,
                        ),
                      );
                    }
                  },
                  child: const Text('Reset'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class NavService {
  static GlobalKey<NavigatorState> navKey = GlobalKey();
}