Flutter离线优先功能插件brick_offline_first的使用

概述

brick_offline_first 是一个结合了SQLite和远程数据源（如Firebase或REST）的统一存储库。它允许应用在在线或离线状态下都能正常运行。

图解

💡 可以通过 policy: 参数改变默认行为，例如：get<Person>(policy: OfflineFirstUpsertPolicy.localOnly)。这适用于 delete、get、getBatched 和 upsert 方法。

字段

@OfflineFirst(where:)

使用唯一标识符，where: 可以连接多个数据源。它声明为本地数据源（键）和远程数据源（值）之间的映射。这对于远程数据源只包含关联的唯一标识符（如 "id": 1）时特别有用。

示例：

[@OfflineFirst](/user/OfflineFirst)(where: {'id' : "data['assoc']['id']"})
final Assoc assoc;

[@OfflineFirst](/user/OfflineFirst)(where: {'id' : "data['assoc']['ids']"})
final List<Assoc> assoc;

.fromJson 和 .toJson

当存储原始数据比存储关联更优时，可以使用工厂方法 .fromJson 或方法 .toJson：

import 'dart:convert';

class Weight {
  final int size;
  final String unit;

  Weight(this.size, this.unit);

  factory Weight.fromJson(Map<String, dynamic> data) {
    if (data == null || data.isEmpty) return null;

    final size = double.parse(data.keys.first.toString() ?? '0');
    return Weight(size, data.values.first);
  }

  Map<String, dynamic> toJson() => {'size': size, 'unit': unit};
}

枚举

Dart的增强枚举也可以用于自定义序列化和反序列化工作：

enum Direction {
  up,
  down;

  factory Direction.fromRest(String direction) => direction == up.name ? up : down;

  int toSqlite() => Direction.values.indexOf(this);
}

OfflineFirstSerdes

当 .fromJson 和 .toJson 过于复杂时，可以使用特定于提供者的工厂或函数：

import 'dart:convert';

class Weight extends OfflineFirstSerdes<Map<int, String>, String> {
  final int size;
  final String unit;

  Weight(this.size, this.unit);

  factory Weight.fromRest(Map<String, dynamic> data) {
    if (data == null || data.isEmpty) return null;

    final size = double.parse(data.keys.first.toString() ?? '0');
    return Weight(size, data.values.first);
  }

  factory Weight.fromSqlite(String data) => Weight.fromRest(jsonDecode(data));

  Map<String, dynamic> toRest() => {size: unit};
  String toSqlite() => jsonEncode(toRest());
}

Mixins

一些常用功能不在Brick核心中，但可以通过Mixins实现：

import 'package:brick_offline_first/mixins.dart';

class MyRepository extends OfflineFirstRepository with DeleteAllMixin {}

RequestSqliteCacheManager

所有对远程数据源的请求首先通过一个队列处理，该队列跟踪未成功的请求，并在应用重新连接时重试这些请求：

final client = RestOfflineQueueClient(
  restProvider.client, // or http.Client()
  "OfflineQueue",
);

⚠️ 队列忽略不是 DELETE、PATCH、POST 和 PUT 的请求。

示例Demo

以下是一个完整的Flutter应用示例，展示如何使用 brick_offline_first：

import 'package:flutter/material.dart';
import 'package:brick_offline_first/brick_offline_first.dart';
import 'package:brick_rest/rest.dart';
import 'package:brick_sqlite/sqlite.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Offline First Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @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:',
            ),
            // TODO: Add your offline-first logic here
          ],
        ),
      ),
    );
  }
}

// Define your models and repository here
class Person {
  final String id;
  final String name;

  Person(this.id, this.name);

  factory Person.fromJson(Map<String, dynamic> json) => Person(
        json['id'],
        json['name'],
      );

  Map<String, dynamic> toJson() => {
        'id': id,
        'name': name,
      };
}

class MyRepository extends OfflineFirstRepository {
  MyRepository(RestProvider rest, SqliteProvider sqlite)
      : super(rest, sqlite);
}

以上示例展示了如何设置一个基本的Flutter应用，并使用 brick_offline_first 实现离线优先的功能。根据实际需求，您可以进一步扩展和定制此示例。