📜  Flutter – 在 Firebase 上读写数据

📅  最后修改于: 2021-09-23 06:21:08             🧑  作者: Mango

Firebase 可帮助开发者轻松管理他们的移动应用。这是谷歌提供的服务。 Firebase 提供各种功能来帮助开发者管理和发展他们的移动应用。在本文中,我们将学习如何向 Firebase 写入和读取数据。我们将为此使用flutter。要完成这项工作,我们需要遵循 3 个步骤:

  1. 将 firebase 添加到我们的应用程序
  2. Firebase 设置
  3. 使用代码实现

将 firebase 添加到我们的应用程序

要与 firebase 交互,我们必须将我们的应用程序注册到 firebase。按照此链接完成初始设置。

Firebase 设置

完成上述设置后,请按照以下步骤操作:

第 1 步:在左侧创建项目后,您将看到这些选项

火力基地菜单

Step2:选择云Firestore,然后选择创建数据库,然后选择测试模式,然后按下一步。

火店

第 3 步:选择任何位置,或者您可以保持原样,然后按启用

地点

创建 Cloud Firestore 后,您将看到空数据库,现在您只需创建一个表并向其添加数据,稍后我们将从我们的应用程序添加数据。按照以下步骤创建集合(表)。

第 1 步:按开始收集

第 2 步:输入集合 ID 的名称并为其文档选择自动 ID

集合编号集合编号集合编号

第 3 步:按添加字段并将字段和值添加为键值对

键值对

第 4 步:最后这就是最终屏幕的外观

最终画面

执行

步骤 1:在您的flutter项目中打开 pubspec.yaml 并在依赖项下添加以下包:

dependencies:
 flutter:
   sdk: flutter
 firebase_core: "^0.5.0"
 cloud_firestore: ^0.14.1

保存上述文件。

注意:添加上述代码时,请确保添加的代码应与flutter处于同一级别。

第 2 步:在终端中执行以下行。

flutter pub get

在执行上述代码行之前,请检查您是否在正确的目录中。上面的代码获取了所有的包。如果出现任何错误,请在添加包时检查间距,并检查是否添加了正确版本的包。

第 3 步:写入数据

Dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
  
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root 
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}
  
class AddData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("geeksforgeeks"),
      ),
      body:Center(
        child: FloatingActionButton(
          backgroundColor: Colors.green,
          child: Icon(Icons.add),
          onPressed: () {
            FirebaseFirestore.instance
                .collection('data')
                .add({'text': 'data added through app'});
          },
        ),
      ),
    );
  }
}


Dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
  
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}
  
class AddData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("geeksforgeeks"),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('data').snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
  
          return ListView(
            children: snapshot.data.docs.map((document) {
              return Container(
                child: Center(child: Text(document['text'])),
              );
            }).toList(),
          );
        },
      ),
    );
  }
}


输出 :

写数据

说明:在上面的代码中,我们在屏幕中央创建了一个浮动操作按钮。当我们按下那个按钮时,我们定义的键值对被发送到 firebase 并存储在其中。如果多次按下按钮,数据将被重复存储。

步骤 4:读取数据

Dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
  
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase',
      home: AddData(),
    );
  }
}
  
class AddData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("geeksforgeeks"),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('data').snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
  
          return ListView(
            children: snapshot.data.docs.map((document) {
              return Container(
                child: Center(child: Text(document['text'])),
              );
            }).toList(),
          );
        },
      ),
    );
  }
}

输出:

读取数据

说明:在上面的代码中,我们从 firebase 获取数据并将其存储为我们数据的快照。为了在屏幕上打印该数据,我们构建了一个将数据显示为文本的列表视图。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!