Flutter数据持久化插件flutter_data的使用

Flutter Data 是一个强大的数据框架，旨在为 Flutter 应用提供零样板代码的持久化和反应式模型。本文将介绍如何使用 flutter_data 插件进行数据持久化，并提供完整的示例 Demo。

特性

• 离线优先：基于 Hive 的本地存储，支持失败处理和重试 API。
• 直观的 API 和简单的设置：通过 Dart mixins 和代码生成器实现可配置和可组合。
• 强大的关系支持：自动同步的关系图和反应式关系。

快速开始

设置和初始化

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_data: ^<latest_version>
  riverpod: ^<latest_version>

dev_dependencies:
  build_runner: ^<latest_version>
  json_serializable: ^<latest_version>

然后运行以下命令安装依赖：

flutter pub get

接下来，创建一个模型类并使用 @DataRepository 注解：

import 'package:flutter_data/flutter_data.dart';
import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart'; // 这个文件会自动生成

@JsonSerializable()
@DataRepository([MyJSONServerAdapter])
class User extends DataModel<User> {
  @override
  final int? id; // ID 可以是任何类型
  final String name;

  User({this.id, required this.name});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

mixin MyJSONServerAdapter on RemoteAdapter<User> {
  @override
  String get baseUrl => "https://my-json-server.typicode.com/flutterdata/demo/";
}

运行代码生成器：

flutter pub run build_runner build

使用 Repository

在 Widget 中使用 ref.users 来访问 Repository：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(usersProvider.watchOne(1));

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Data Example')),
        body: Center(
          child: state.when(
            data: (user) => Text(user!.name),
            loading: () => CircularProgressIndicator(),
            error: (err, stack) => Text('Error: $err'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await ref.read(usersProvider).save(User(id: 1, name: 'Updated'));
          },
          child: Icon(Icons.update),
        ),
      ),
    );
  }
}

更多示例

创建新用户

final user = await User(name: 'New User').save();
print(user.id); // 新用户的ID

查找用户

final user = await ref.users.findOne(1, params: {'_embed': 'tasks'});
print(user.tasks.length); // 用户的任务数量

删除任务

await user.tasks.last.delete();

完整示例 Demo

以下是完整示例 Demo，包含基本的增删改查操作：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_data/flutter_data.dart';
import 'models/user.dart';

const List<int> _encryptionKey = [
  146, 54, 40, 58, 46, 90, 152, 2, 193, 210, 220, 199, 16, 96, 107, 4,
  243, 133, 171, 31, 241, 26, 149, 53, 172, 36, 121, 103, 17, 155, 120, 61
];

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends ConsumerStatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  late Directory _dir;

  @override
  void initState() {
    super.initState();
    initStorage();
  }

  Future<void> initStorage() async {
    final container = ProviderContainer(
      overrides: [
        configureRepositoryLocalStorage(
          baseDirFn: () => _dir.path,
          encryptionKey: _encryptionKey,
          clear: LocalStorageClearStrategy.always,
        ),
      ],
    );

    _dir = Directory.systemTemp.createTempSync();
    print('Using temporary directory: ${_dir.path}');
    _dir.deleteSync(recursive: true);

    await container.read(repositoryInitializerProvider.future);

    container.users.logLevel = 2;
    container.tasks.logLevel = 2;

    await container.tasks.findAll(params: {'user_id': 1, '_limit': 3});

    final user = User(id: 19, name: 'Zeku');
    final user2 = await container.users.findOne(19, remote: false);

    assert(user == user2);
    assert(user.tasks.length == 3);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Data Example')),
      body: Center(
        child: Text('Check console for logs.'),
      ),
    );
  }

  @override
  void dispose() {
    _dir.deleteSync(recursive: true);
    super.dispose();
  }
}

通过上述步骤，您可以轻松地在 Flutter 应用中集成 flutter_data 插件，实现数据持久化和离线优先的功能。更多详细信息请参考 官方文档。