Flutter | 使用 Firebase 作为 APP 的后端存储数据

4,080 阅读3分钟

前言

* 需要注意的是,国内的用户如果想要访问 Firebase 数据库中的数据,必须要科学上网,所以......
* 其实我的目的只是想要体验一下 Firebase 到底有多爽,想要用到项目里的话..... 还是洗洗睡吧 (手动狗头

Firestore 是一种 NoSQL 文档数据库,它简化了应用同步、存储和查询数据(官方说在全球范围内...... hhh 手动狗头)。它可以通过实时侦听器使 APP 的数据在各个客户端应用之间保持同步,并为移动和网页应用提供离线支持,以帮助开发者构建无论网络延迟时间或互联网连接状况如何都能快速响应的应用。

我将通过一个小 demo 来演示如何使用。该 demo 实现了一个 To-do List,待办事项包括时间、事项名称以及详细描述,可以添加和删除待办事项。

demo 源码已上传至 GitHub:github.com/MzoneCL/Flu…

效果图:

(在云端删除,客户端立马就能响应)

接下来就简单介绍一下如何使用 FireStore 作为我们 APP 的后端存储数据。

第一步:创建 FireBase 项目

Firebase 官网:console.firebase.google.com/

你先得有一个 Google 账号。

登录账户 进入上述链接后,点击“添加项目”

输入项目名,之后一切保持默认即可,勾选“我接受......”,然后点击“创建项目”

完了之后,点击“继续”,进入控制台。这样,一个 Firebase 项目就新建好了。

第二步:为 Firebase 项目添加应用

可以添加iOS、Android、Web 还有 Unity 应用,我这里就以 Android 应用为例吧。点击 Android 图标。

在这里填上应用包名(包名可以在 项目名/android/app/src/build.gradle 文件里找到,applicationId 后面就是),然后点击注册应用。

接着下载配置文件 google-services.json,将其拷贝到项目的 android/app 目录下。

接着,将 “ classpath 'com.google.gms:google-services:4.2.0' ” (不包括引号)添加到项目级的 build.gradle 文件中如图所示的位置。

然后,在 app 目录下的如下位置分别添加 “ implementation 'com.google.firebase:firebase-core:16.0.9' ” 和 “ apply plugin: 'com.google.gms.google-services' ”(不包括引号)

然后同步。

最后就是验证,要确保你的应用在运行才能验证成功,所以我们要运行我们的 APP,如果本来就在运行中,可能需要重新运行。

验证完成:

第三步:添加数据

上一步完成之后,转到 Firebase 控制台,点击左侧 Database:

创建数据库:

选择“以测试模式开启”,点击“启用”:
添加集合:

添加文档(数据):

我这里随便添加了三个数据:

第四步:添加依赖

添加 cloud_firestore 包。

pub 地址:pub.dev/packages/cl…

第五步:编写代码

想要将云端的数据显示出来,只需配合 StreamBuilder 使用即可,有关 StreamBuilder 的讲解可以看看这位大佬的博客:juejin.cn/post/684490…

(当然,就算你不懂 SreamBuilder,这里也不影响,不过我建议还是要看看,因为 StreamBuilder 真的超有用!!)

Widget _buildBody(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection('to_do_list').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) return LinearProgressIndicator();

      return _buildList(context, snapshot.data.documents);
    },
  );
}

长按表项删除的代码,需要传入一个 DocumentReference 类型的参数:

_delete(DocumentReference reference) {
  Firestore.instance.runTransaction((transaction) async {
    transaction.delete(reference);
  });
}

添加表项的代码:

_addItem(String title, Timestamp time, String detail) {
  Firestore.instance
      .collection('to_do_list')
      .add({'title': title, 'time': time, 'detail': detail});
}

可能遇到的错误及解决办法

Error:Cannot fit requested classes in a single dex file.Try supplying a main-dex list. # methods: 72477 > 65536

解决办法:www.jianshu.com/p/9176562ce…

参考

Firebase For Flutter:

codelabs.developers.google.com/codelabs/fl…

Using Firestore as a backend to your Flutter app:

www.youtube.com/watch?v=DqJ…

Cloud Firestore:

firebase.google.com/docs/firest…