Flutter 离线数据方案 Flutter_Data 包

原文 levelup.gitconnected.com/flutter-off…

前语

经过离线优先来改善您的用户体验

Flutter Data 是一个让你的应用程序先离线的软件包。

离线时，它在设备上运用 Hive 存储，当到 API 的衔接可用时，更改将主动同步。

在本文中，咱们将增加 flutter_data 包并将其衔接起来，以便在应用程序发动时检索 recipes。

正文

我花了一段时刻才弄清楚自己想要什么，并勾勒出规划草图:

High level design

当时发生了许多作业，要想做好是很杂乱的。

我用粗体文本突出显现了一些需求编码或装备的操作，并用它们制作了一个使命列表:

• 进程 1: 在发动时从 app_config.json 加载环境值。
• 进程 2: 增加新包。
• 进程 3: 注释 recipes 模型。
• 进程 4: 装备 Flutter 数据。
• 进程 5: 掩盖 Http 客户端运用 Dio。
• 进程 6: 为开发和测验装备 Mock Adapter。

您能够在 XP 部分中找到实现细节。

这篇文章有许多细节，我的建议是阅览足够多的内容来了解正在发生的作业，假如您决定或需求实现它，能够将其作为参考。

请反应，假如你有更好的办法或建议的改善。咱们欢迎任何有助于改善这一要害开展使命的协助。

Ta Da 哒哒

GlobalEnvironmentValues.instance
   .loadValues(await rootBundle.loadString("app_config.json"));

发动时从 app_config.json 加载环境值。

对恳求运用模仿 API 客户端

Flutter 数据触发 FindAll 办法

显现回来的 recipes

显现 Flutter Data 回来的 recipes

感觉有点虎头蛇尾，由于咱们刚刚装备了离线拜访，但仍在运用模仿数据进行开发和测验。

可是，这是咱们现在能够支撑新实体的离线数据的一大步，咱们现已为要害的开发使命(增加或修改特性)准备了强壮的编码形式。

一旦我进行了身份验证，我就会回来，使 Flutter Data 能够运用基于环境的云 API 服务，我期望设置 dev_online 和 dev_local 形式，并运用布置构建来装备 UAT 和 Live 版别。

实施细节

• 进程 1 ー在发动时加载环境值

从 app_config.json 文件加载环境值

“GlobalEnvironmentValues”服务运用“ EnvConfigReader”加载 app_config.json 值:

import 'dart:convert';
// Access to enviromental values that are loaded from a config file.
// The CI/CD injects the per environment files on deployment.
class EnvConfigReader {
  late Map<String, dynamic> _config;
  EnvConfigReader(String configFileJson) {
    _config = json.decode(configFileJson) as Map<String, dynamic>;
  }
  String value(String key) {
    return _config[key];
  }
}

• 进程 2 ーー增加新的软件包

# Offline-first data framework with a customizable REST client and powerful model relationships.
flutter_data: ^1.4.7
# A reactive state caching and data-binding framework
# Recommend replacement for provider: that is mentioned by flutter
# https://docs.flutter.dev/development/data-and-backend/state-mgmt/options
hooks_riverpod: ^1.0.3+1
# Annotations used by code gen to create code for JSON serialization and deserialization
json_annotation: ^4.7.0
# Generate to/from JSON code for a class
json_serializable: ^6.5.4

进程 3 ーー注释 recipes 模型

import 'package:flutter_data/flutter_data.dart';
import 'package:json_annotation/json_annotation.dart';
import 'package:simbucore/app/mixin/flutter_data_dev_api_server_adapter.dart';
part 'recipe.g.dart';
@JsonSerializable()
@DataRepository([FlutterDataApiServerAdapter])
class Recipe extends DataModel<Recipe> {
  @override
  final int? id;
  final String title;
  final String link;
  final String source;
  final String totalTime;
  final HasMany<Ingredient> ingredients;
  final HasMany<Step> steps;
  final String thumbnail;

将零件引证增加到即将生成的文件的导入，在下一步运转构建器之前，您将看到一个过错:

文件丢失过错

联系需求运用 HasMany 和 BelongsTo 检查更多信息的文档。

Mixin FlutterDataApiServerAdapter 运用咱们现在在发动时加载的环境值设置 API 基 URL。

• 进程 4 ー设定 Flutter 数据

生成配方库

flutter pub run build_runner build

咱们需求生成一个存储库，然后才能在发动时初始化它，由于代码生成会在它生成的文件中生成初始化办法:

由 Flutter 数据生成的文件(Hive)

现在咱们能够在应用程序发动时将其衔接起来:

Wire up the local Hive storage

衔接本地的 Hive 仓库

• 进程 X ー模仿 API 回应

这个重新规划的进程 X ーー Mock API Response，现在取代了计划中的两个进程:

• 进程 5 ーー重写 Http 客户端以运用 Dio
• 进程 6 ー装备模仿适配器

在对 Flutter Data 代码进行了更深化的研讨之后，很明显，测验运用 Dio 将意味着与包对抗，许多好处都在于它运用的针对 watch One、 Save、 findAll 等办法的代码中。

经过研讨 Flutter Data 怎么测验它具有的代码并决定重写 HttpClient，我找到了我需求的东西:

重写 HttpClient 供给程序以模仿 API 呼应

Dio 还会带来其他一些好处，可是看起来 Flutter Data 能够经过自定义适配器轻松 extension ，以处理身份验证令牌和重试之类的作业。在 Flutter Data 网站上有一些文章和代码示例。

为什么我选择运用 Flutter_Data

运用包是简化和减少项目代码的一种很好的办法，使其更简略维护。

咱们在引进微应用程序 DigestablePrologue 时看到了这一点，它答应我删除主项目 DigestableMe 中的横切代码。

这简化了 DigestableMe 中的代码，让它专心于应用程序的特性，而 DigestablePrologue 处理所有的发动操作，比如布局和主题选择，以及衔接 Riverpod 的 state management 包。

可是没有什么是 free 的，软件包会限制你，它们或许会停滞不前，或许会导致破坏性的改变，有依靠性，把你绑定到旧的软件包，有 bug 或许漏洞百出的笼统。

我的引爆盛行是，Flutter_data 供给了大量我正在寻觅的功用，与 Riverpod 十分符合:

• 运用代码生成从带注释的类创立 CRUD 存储库。
• 树立本地数据库。
• 离线检测。
• 反应式数据绑定。
• 失利和重试处理。
• 在线时与 RestAPI 主动同步。
• 可交换的联系。
• 和 Riverpod 一同作业。
• 支撑我想运用的 JSON: API。
• JSON 序列化被加入进来。
• 选项用于实现不可变性。

这是咱们能够笼统出来的许多东西，咱们能够创立一个新的规程来展现怎么经过代码生成将新条目引进到应用程序中。

固执己见能够成为团队中真正的力量，怎么达到一致是困难的一点，它通常涉及到更密切的协作。

多年来，我发现结对编程在组建团队和开始项目时的确很有协助。

Going in the same direction

朝着同一个方向

每个环境的 API’s

将文件增加到项目 app_config 的根目录。Json 来保存开发 api 端点地址，这将被 CodeMagic 构建来支撑其他环境所吞噬，概况请参阅他们的文章《带有 CodeMagic CD 的 Flutter 环境》。

然后拦截这个虚构的端点，指向咱们的模仿开发数据。

开发环境装备值

这些值能够经过供给程序拜访，供给程序在应用程序运转时读取这些值。

灵敏的学习和实验

在上一篇文章中，我增加了一个特性来检测客户机设备何时脱机，目的是运用它来同步脱机数据。

当我在本文中介绍 Flutter_Data 时，我意识到它能够处理检测，而且能够节省一些时刻。但是:

你不能把未来的点点滴滴联系起来，你只能把它们回顾地联系起来… ..。

史蒂夫 乔布斯

它仅仅提示我去测验，但不要太珍惜扔掉我花时刻在上面的作业，当一个更好的选择出现的时候。

Flutter Data ーー 联系

构建器强制要求图表中的所有相关模型都要注释:

生成器过错ーー短少相关成分模型

Flutter Data ーー IsOfflineError 标志

Flutter Data 怎么决定设备是否脱机。

Hive 本地数据库文件

Hive 在这里编写本地数据库文件:

/Users/<user>/Library/Developer/CoreSimulator/Devices
/060DB285-2820-411B-B5F7-76F9739DA934/data/Containers/Data/Application
/A72C3081-43DD-4E03-82D0-DC49A3AF1317/Documents/flutter_data

基本目录是经过途径供给程序包中的 getApplicationDocumentsDirectory 函数取得的，您能够在生成的 main.data.dart 文件中找到代码。

...
if (!kIsWeb) {
    baseDirFn ??= () => getApplicationDocumentsDirectory()
    .then(
      (dir) => dir.path
      );
  } else {
    baseDirFn ??= () => '';
  }
...

假如在 configureRepositoryLocalStorage 初始化办法中重写 baseDirFn 参数，则能够设置自己的基目录。

进入 external 包代码

为了找到 Hive 没有写入权限的目录途径，我有必要翻开调试包代码的才能

Code.Preferences.Settings 菜单项

我重新发动了 VisualStudio 代码以使其正常作业，但您或许只需求重新发动应用程序。

Flutter Data 数据诊断

我期望能够翻开诊断日志记载，输出 Flutter Data 正在采取的要害操作，比如从 Hive 检索，由于离线并输出任何反常的信息，特别是从/到 json 的映射。

Discipline & Scaffold 脚手架

一旦我现已验证和运用 Flutter 数据的举动几回，我将创立一个新的纪律，环绕它和改善脚手架。

这将是大多数新特性的中心部分，值得努力使进程简略而且代码可维护。

Latency and Chat 延迟和谈天

假如咱们遇到了呼应问题，咱们或许需求考虑减少对 API 的调用(少谈天) ，我置疑这仅仅经过一个更大的图表或批处理调用，咱们需求找出最好的方式，这将适合 flutter_data 包。

包和依靠项

在介绍了 Flutter_data 软件包之后，我企图将 Riverpod 晋级到 2.1.1 版别，得到了以下结果:

依靠冲突一起晋级 Riverpod

跟着增加更多的软件包和微应用程序软件包，您的依靠联系将变得更难处理和晋级。

这是一个候选的一些额定的陈述或工具，以协助咱们的规模。

在这种情况下，Flutter_Data 需求 Riverpod 的 1.x 版别。

我在 pubspec.yaml 中为 Riverpod 指定了一些更高的版别号，在 simbucore 包中指定了 Flutter_Data，这简化了过错音讯，从而处理了这个问题。

Clearer message

运转指令:

flutter pub outdated

显现能够解析的版别:

指令输出，显现能够解析的版别

Packages

• Flutter_data
• json_annotation
• json_serializable

结束语

假如本文对你有协助，请转发让更多的朋友阅览。

也许这个操作只需你 3 秒钟，对我来说是一个鼓励，感谢。

祝你有一个夸姣的一天~

---

猫哥

• 微信 ducafecat

• wiki.ducafecat.tech

• video.ducafecat.tech