Flutter自动同步数据插件auto_sync_plus的使用

Flutter自动同步数据插件auto_sync_plus的使用

特性

同步小部件

  • SyncedImageView: 自动从网络或本地缓存加载图片,并在离线时提供占位符支持。
  • SyncedPDFView: 使用SfPdfViewer平滑渲染PDF,从网络或本地缓存加载PDF并提供回退支持。

离线支持

  • 缓存图片、PDF和数据以供离线使用。
  • 根据连接状态自动切换在线和离线源。

数据管理

  • 使用SharedPreferences保存和加载结构化数据。
  • 从API获取并缓存数据,并可以选择缓存图片和PDF。

缓存管理

  • 选择性地清除缓存数据和文件,以实现高效的存储管理。

安装

要将auto_sync_plus添加到你的项目中,请将其添加到pubspec.yaml文件中:

dependencies:
  auto_sync_plus:
    git:
      url: https://github.com/prakashbahadurchand/auto_sync_plus.git

示例用法

在Repository中使用

class CoreRepo {
  final AutoSyncPlus autoSync = AutoSyncPlus();

  final List<Future<void> Function()> _syncTasks = [
    () => CoreRepo().getDataFromFirstApiCall(),
    () => CoreRepo().getDataFromSecondApiCall(),
  ];

  // 获取同步进度,用于展示下载所有数据的进度
  Stream<int> syncAllDataWithProgress() async* {
    final int totalTasks = _syncTasks.length;
    int completedTasks = 0;

    for (var syncTask in _syncTasks) {
      try {
        await syncTask();
        completedTasks++;
        yield (completedTasks / totalTasks * 100).toInt(); // 以百分比形式发出进度
      } catch (e) {
        log('Error syncing task: $e');
        toast('Error syncing task: $e');
      }
    }
  }

  // 获取并缓存第一个API调用的数据
  Future<List<FirstApiDto>> getDataFromFirstApiCall() =>
      autoSync.fetchAndCacheData(
        'first_api_call',
        () => CoreApiClient(buildDioClient(null)).getDataFromFirstApiCall(), // 调用API获取数据
        (json) => FirstApiDto.fromJson(json),  // 将JSON响应映射到DTO
        (dto) => dto.toJson(),  // 将DTO映射到JSON以进行缓存
      );

  // 获取并缓存另一个API调用的数据
  Future<List<SecondApiDto>> getDataFromSecondApiCall() =>
      autoSync.fetchAndCacheData(
        'second_api_call',
        () => CoreApiClient(buildDioClient(null)).getDataFromSecondApiCall(), // 调用API获取数据
        (json) => SecondApiDto.fromJson(json),  // 将JSON响应映射到DTO
        (dto) => dto.toJson(),  // 将DTO映射到JSON以进行缓存
      );
}

在小部件中使用

// ImageView:
SyncedImageView(
    url: imageUrl,
    width: double.infinity,
    height: 50,
    fit: BoxFit.cover,
    placeholder: AppAsset.imgPlaceholder,
);

// PDF View:
SyncedPDFView(url: pdfUrl);

更多关于Flutter自动同步数据插件auto_sync_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动同步数据插件auto_sync_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


auto_sync_plus 是一个用于在 Flutter 应用中自动同步数据的插件。它可以帮助开发者在应用中实现数据同步功能,尤其是在需要将本地数据与远程服务器或云存储同步的场景中。以下是如何使用 auto_sync_plus 插件的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 auto_sync_plus 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  auto_sync_plus: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 初始化同步管理器

在使用 auto_sync_plus 之前,你需要初始化一个同步管理器。通常,你可以在应用的 main.dart 文件中进行初始化。

import 'package:auto_sync_plus/auto_sync_plus.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化同步管理器
  await AutoSyncPlus.initialize(
    syncInterval: Duration(minutes: 5), // 同步间隔时间
    onSync: _syncData, // 同步回调函数
  );

  runApp(MyApp());
}

// 同步回调函数
Future<void> _syncData() async {
  // 在这里实现数据同步逻辑
  // 例如:将本地数据上传到服务器,或从服务器下载数据到本地
}

3. 启动同步

你可以通过调用 AutoSyncPlus.start() 来启动自动同步。

AutoSyncPlus.start();

4. 停止同步

如果你需要停止同步,可以调用 AutoSyncPlus.stop()

AutoSyncPlus.stop();

5. 手动触发同步

你也可以手动触发同步,通过调用 AutoSyncPlus.syncNow()

AutoSyncPlus.syncNow();

6. 处理同步事件

你可以监听同步事件,以便在同步成功或失败时执行一些操作。

AutoSyncPlus.onSyncSuccess.listen((_) {
  // 同步成功时的操作
});

AutoSyncPlus.onSyncFailure.listen((error) {
  // 同步失败时的操作
});

7. 示例代码

以下是一个简单的示例,展示了如何在 Flutter 应用中使用 auto_sync_plus 插件。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化同步管理器
  await AutoSyncPlus.initialize(
    syncInterval: Duration(minutes: 5),
    onSync: _syncData,
  );

  runApp(MyApp());
}

Future<void> _syncData() async {
  // 模拟数据同步
  await Future.delayed(Duration(seconds: 2));
  print('Data synchronized');
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auto Sync Plus Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  AutoSyncPlus.start();
                },
                child: Text('Start Sync'),
              ),
              ElevatedButton(
                onPressed: () {
                  AutoSyncPlus.stop();
                },
                child: Text('Stop Sync'),
              ),
              ElevatedButton(
                onPressed: () {
                  AutoSyncPlus.syncNow();
                },
                child: Text('Sync Now'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部