Google Flutter From Scratch：使用Firebase服务

Google firebase是当今可用的最强大、最通用的无服务器平台之一，您可以毫不费力地为您的移动应用程序添加基本功能，例如用户管理、崩溃报告、分析、实时数据存储，甚至机器学习。为了能够在使用 Google flutter 框架的同时使用该平台，您需要FlutterFire。

FlutterFire 是一个不断增长的 firebase 官方 Flutter 插件集合。在本教程中，我将向您展示如何使用它将三种不同的 Firebase服务添加到 Flutter 应用程序中。

先决条件

要遵循此分步教程，您需要：

• android Studio 3.1.3 或更高版本

• Google Flutter SDK 0.9.4 或更高版本

• Google Flutter 插件 29.0.1 或更高版本

• Firebase帐户_

• 运行 Android api级别 23 或更高级别的设备

如果您没有 Flutter SDK 或 Flutter 插件，请在此处了解如何安装它们：

Android SDK Google Flutter From scratch：使用小部件构建应用程序 Ashraff Hathibelagal

1.准备一个 Google Flutter 项目

启动 Android Studio 并创建一个新的 Flutter 项目。在项目创建向导中，确保您选择了Flutter 应用程序 选项并将有效的包名称与其关联。

在您向 Firebase 平台注册并将其链接到 Firebase 项目之前，您无法在此项目中使用 Firebase 服务。尽管您可以使用浏览器手动执行此操作，但您可以通过使用 Android Studio 的 Firebase 助手来节省大量时间和精力，它可以为您自动执行大部分步骤。

首先打开嵌入到 Flutter 项目中的原生 Android 项目，方法是转到Tools > Flutter > Open for Editing in Android Studio。出现提示时，请确保在新窗口中打开项目。

在新窗口中，转到工具 > Firebase 以打开 Firebase 助手。

然后转到分析 > 记录分析事件。在接下来打开的屏幕中，按下连接 按钮。

您现在将看到一个对话框，提示您指定新 Firebase 项目的名称。输入您喜欢的名称，然后按Connect to Firebase 按钮。

此时，Firebase 助手会自动完成注册过程，并为您的项目添加一个名为google-services.json的文件，其中包含重要的配置详细信息。

为了能够读取 JSON 文件，您需要 Google Services 插件。因此，打开根级build.gradle 文件并classpath 在该部分中添加插件 dependencies ：

classpath 'com.google.gms:google-services:4.0.1'

接下来，通过在应用级build.gradle 文件的末尾添加以下行来激活插件：

apply plugin: 'com.google.gms.google-services'

您现在可以关闭新窗口并返回到 Flutter 项目。

2.添加依赖

FlutterFire 为大多数 Firebase 服务提供了独立的 Google Flutter 插件。要将插件作为依赖项添加到 Flutter 项目中，您只需 在pubspec.yaml 文件的dependencies 键下提及它们。

以下代码向您展示了如何为与 Analytics、Cloud Fi rest ore 和 ML Kit 服务关联的最新版本插件添加依赖项：

firebase_analytics: ^1.0.3
cloud_firestore: ^0.7.3
firebase_ml_vision: ^0.2.0+1

在本教程中，您将创建一个可以扫描 QR 码并将其中包含的数据保存在云数据库中的应用程序。您可能已经猜到了，您将使用 ML Kit 插件作为 QR 码解码器，并将 Cloud Firestore 插件用作数据库的接口。

但是，要实际捕获 QR 码，您需要Image Picker，这是一个允许您与相机交互的插件。以下是如何将其添加为另一个依赖项的方法：

image_picker: ^0.4.10

添加依赖项后，继续并按Packages get 按钮安装所有插件。

3.使用 Firebase 分析

通常，您无需编写任何额外代码即可在 Flutter 应用中使用 Firebase Analytics。只要安装了相关插件，您的应用就会自动向 Firebase 报告用户数据。您可以通过立即运行您的应用并转到 Firebase控制台来验证这一点。

 如果您在前面的步骤中没有遇到任何配置错误，您将能够在 Analytics 仪表板的StreamView面板中看到弹出的事件。

4.使用 Firebase 机器学习套件

Firebase ML Kit 是最近推出的 Firebase 服务，可让您检测人脸、扫描条形码以及对任何图像或视频执行光学字符识别操作。它的 FlutterFire 插件提供了一个非常直观和简洁的 API。现在让我们用它来解码二维码。

首先创建一个包含按钮的布局，用户可以按下该按钮来捕捉 QR 码的照片。以下代码向您展示了如何创建一个 Material Design 布局，其中一个 RaisedButton 小部件位于中心：

void main() => runApp(new MaterialApp(home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(
          onPressed: () {

            // More code here

          },
          child: new Text("Capture QR Code")
        )
      )
    );
  }
}

如果您现在运行该应用程序，它将如下所示：

请注意，该按钮有一个与之关联的按下事件***器。在***器内部，您可以使用该类的pickImage() 方法ImagePicker 来捕获照片。由于该方法是异步运行的，因此您必须为其附加一个***器才能接收其结果。以下代码向您展示了如何：

ImagePicker.pickImage(source: ImageSource.camera).then((photo) {
  // More code here
});

拍摄照片后，您可以将其传递给 ML Kit 的 BarcodeDetector 类以检测其中可能包含的 QR 码。要获取类的实例，请使用类的barcodeDetector() 方法FirebaseVision 。

ML Kit 支持许多不同类型的条形码。为了使检测过程更高效，您可以使用BarcodeDetectorOptions 对象来指定您感兴趣的条形码类型。以下是仅针对 QR 码创建检测器的方法：

BarcodeDetector detector = 
          FirebaseVision.instance.barcodeDetector(
            BarcodeDetectorOptions(
                barcodeFormats: BarcodeFormat.qrCode
            )
          );

 由于检测器无法直接处理图像文件，因此您必须使用其方法将照片转换为FirebaseVisionImage 对象。fromFile()然后，您可以将对象传递给检测器的detectInImage() 方法以获取检测到的条形码列表。该方法异步运行，因此您需要为其附加一个***器。

detector
      .detectInImage(FirebaseVisionImage.fromFile(photo))
      .then((barcodes) {
        // More code here        
      });

在***器内部，您将可以访问Barcode 对象列表。每个此类对象的rawValue 字段都包含原始解码数据。现在，为了简单起见，让我们使用一个AlertDialog 小部件来显示列表第一项中存在的原始数据。

以下代码向您展示了如何创建一个简单AlertDialog的小Text部件，其中包含用于其标题和内容的FlatButton 小部件，以及一个可以按下以关闭它的小部件：

if(barcodes.length > 0) {
  var barcode = barcodes[0]; // Pick first barcode

  // Create Alert Dialog
  showDialog(context: context, builder: (context) {
    return new AlertDialog(
      title: new Text("QR Code Contents"),
      content: new Text(barcode.rawValue),  // Show raw value
      actions: <Widget>[new FlatButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: new Text("OK")
      )],
    );
  });
}

您现在可以运行该应用程序并尝试扫描一些二维码。

5.使用 Cloud Firestore

Cloud Firestore 是一个 Nosql 数据库，可用于将应用的数据存储在云中。它的 FlutterFire 插件提供了允许您对其异步执行 CRUD 操作的类。

在开始使用之前，您必须在 Firebase 控制台中手动启用 Cloud Firestore 服务。为此，请转到控制台的“数据库 ”部分，然后按“创建数据库” 按钮。

当提示定义数据库的安全规则时，选择Start in test mode 选项。此模式允许您立即开始使用数据库，但它不是很安全，仅适用于测试目的。

最后，按下Enable 按钮创建数据库。

instance 回到 Android Studio，您可以通过使用类的字段来获取对数据库的引用 Firestore 。因此，将以下代码添加到您的无状态小部件：

var mydatabase = Firestore.instance;

使用 Cloud Firestore 时，您必须将所有数据存储在文档中。此外，每个文档必须属于一个集合。要创建或引用集合，您必须使用该collection() 方法，该方法需要一个指定集合名称的字符串。

一旦你可以访问一个集合，你就可以调用它的add() 方法来添加一个文档。

您可以在调用函数之前添加以下代码，showDialog() 向您展示如何创建一个新文档（包含 QR 码的原始值和时间戳）并将其添加到名为 的集合中qr_codes：

myDatabase.collection("qr_codes").add({
        "raw_data": barcode.rawValue,
        "time": new DateTime.now().millisecondsSinceEpoch
      }).then((_) {
        print("One document added.");
      });

如果您再次运行该应用并使用它扫描二维码，您现在将能够在 Firebase 控制台中看到二维码的内容。

结论

Firebase 平台提供的服务在开发现代移动应用程序时必不可少。几乎所有这些服务都有官方的 Google Flutter 插件。在本教程中，您学习了如何结合使用其中的三个来创建高度准确的 QR 码扫描仪应用程序。