Flutter数据模型与Firestore集成插件katana_model_firestore的使用

介绍

在Flutter开发中，数据读写实现可能比较繁琐。为了简化这一过程，katana_model插件提供了一种简洁的方式来处理数据模型与Firestore的集成。本文将详细介绍如何使用katana_model_firestore插件来集成Flutter数据模型与Firestore。

安装

首先，确保你已经在项目中添加了必要的依赖：

dependencies:
  katana_model: ^latest_version
  katana_model_firestore: ^latest_version

如果你还需要本地数据库支持，可以添加：

dependencies:
  katana_model_local: ^latest_version

数据模型实现

文档模型

创建一个文档模型类，继承自DocumentBase<T>，并实现fromMap和toMap方法：

class DynamicMapDocument extends DocumentBase<Map<String, dynamic>> {
  DynamicMapDocument(super.modelQuery);

  @override
  Map<String, dynamic> fromMap(Map<String, dynamic> map) => map;

  @override
  Map<String, dynamic> toMap(Map<String, dynamic> value) => value;
}

集合模型

创建一个集合模型类，继承自CollectionBase<TDocument>，并实现create方法：

class DynamicMapCollection extends CollectionBase<DynamicMapDocument> {
  DynamicMapCollection(super.modelQuery);

  @override
  DynamicMapDocument create([String? id]) {
    return DynamicMapDocument(modelQuery.create(id));
  }
}

使用示例

初始化ModelAdapterScope

在应用启动时，初始化ModelAdapterScope并选择合适的适配器（例如，FirestoreModelAdapter）：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ModelAdapterScope(
      adapter: FirestoreModelAdapter(options: DefaultFirebaseOptions.currentPlatform),
      child: MaterialApp(
        home: const ModelPage(),
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );
  }
}

创建、加载、更新和删除数据

以下是一个完整的示例，展示了如何使用上述模型进行CRUD操作：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:katana_model/katana_model.dart';

class ModelDocument extends DocumentBase<Map<String, dynamic>> {
  ModelDocument(super.modelQuery);

  @override
  Map<String, dynamic> fromMap(Map<String, dynamic> map) => map;

  @override
  Map<String, dynamic> toMap(Map<String, dynamic> value) => value;
}

class ModelCollection extends CollectionBase<ModelDocument> {
  ModelCollection(super.modelQuery);

  @override
  ModelDocument create([String? id]) {
    return ModelDocument(modelQuery.create(id));
  }
}

class ModelPage extends StatefulWidget {
  const ModelPage({super.key});

  @override
  State<StatefulWidget> createState() => ModelPageState();
}

class ModelPageState extends State<ModelPage> {
  final collection = ModelCollection(const CollectionModelQuery("/user"));

  @override
  void initState() {
    super.initState();
    collection.addListener(_handledOnUpdate);
    collection.load();
  }

  void _handledOnUpdate() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    collection.removeListener(_handledOnUpdate);
    collection.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter Demo")),
      body: FutureBuilder(
        future: collection.loading ?? Future.value(),
        builder: (context, snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return const Center(child: CircularProgressIndicator());
          }
          return ListView(
            children: [
              ...collection.mapListenable((doc) {
                return ListTile(
                  title: Text(doc.value?["count"].toString() ?? "0"),
                  trailing: IconButton(
                    onPressed: () {
                      doc.delete();
                    },
                    icon: const Icon(Icons.delete),
                  ),
                  onTap: () {
                    doc.save({
                      "count": Random().nextInt(100),
                    });
                  },
                );
              }),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          final doc = collection.create();
          doc.save({
            "count": Random().nextInt(100),
          });
        },
      ),
    );
  }
}

切换数据库

通过更改传递给ModelAdapterScope的ModelAdapter，你可以轻松地从模拟数据切换到本地数据库或Firestore。例如：

// 使用本地数据库
ModelAdapterScope(
  adapter: const LocalModelAdapter(),
  child: MaterialApp(
    home: const ScopedTestPage(),
    title: "Flutter Demo",
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ),
)

// 使用Firestore数据库
ModelAdapterScope(
  adapter: FirestoreModelAdapter(options: DefaultFirebaseOptions.currentPlatform),
  child: MaterialApp(
    home: const ScopedTestPage(),
    title: "Flutter Demo",
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ),
)