如何使用Flutter为iOS和Android应用设置Firebase

￡神魔★判官ぃ 2022-11-27 05:21 150阅读 0赞

Firebase is a great backend solution for anyone that wants to use authentication, databases, cloud functions, ads and countless other features within an app. Luckily for us, Flutter has official support for Firebase with the [FlutterFire][] set of libraries.

对于想要在应用程序中使用身份验证，数据库，云功能，广告和无数其他功能的任何人，Firebase是一个出色的后端解决方案。 对我们来说幸运的是，Flutter通过[FlutterFire][]库集对Firebase提供了官方支持。

As we’re dealing with iOS and Android platform(s), we’ll have to go through the setup process for both. Let’s start by ensuring we’ve got a Firebase project created over at [https://console.firebase.google.com][https_console.firebase.google.com].

在处理iOS和Android平台时，我们都必须完成两者的设置过程。 首先，请确保已在[https://console.firebase.google.com上][https_console.firebase.google.com]创建了一个Firebase项目。

## 创建一个新的Flutter项目 **(**Creating a New Flutter Project**)** ##

In order to follow along with the setup we’ll be creating an example Flutter app. Assuming you already have the Flutter and Dart SDKs installed, run the following in your terminal:

为了进行设置，我们将创建一个Flutter应用示例。 假设您已经安装了Flutter和Dart SDK，请在终端中运行以下命令：

# New Flutter application
    $ flutter create flutter_firebase
    
    # Open this up inside of VS Code
    $ cd flutter_firebase && code .

Now that we’ve got a Flutter project up and running, we can add Firebase.

现在我们已经启动并运行了Flutter项目，我们可以添加Firebase。

## 创建一个新的Firebase项目 **(**Creating a New Firebase Project**)** ##

From within the Firebase dashboard, select the “Create new project” button and give it a name:

从Firebase仪表板中，选择“创建新项目”按钮并为其命名：

Next up, we’re given the option to enable Google Analytics. It isn’t directly necessary for what we’re trying to do, so do whatever feels right for your use-case here.

接下来，我们可以选择启用Google Analytics(分析)。 我们尝试做的事情不是直接必要的，因此在这里适合您的用例。

Assuming that we’re using Google Analytics, we’ll need to review and accept the terms and conditions prior to project creation.

假设我们正在使用Google Analytics(分析)，则需要在创建项目之前查看并接受条款和条件。

--------------------

After a relatively painless setup process, we should now be navigated to the dashboard for our project.

经过相对轻松的设置过程后，我们现在应该导航到项目的仪表板。

## 添加Android支持 **(**Adding Android support**)** ##

### 步骤1：注册应用 **(**Step 1: Register app**)** ###

In order to add Android support to our Flutter application, select the Android logo from the dashboard. This brings us to the following screen:

为了向我们的Flutter应用程序添加Android支持，请从信息中心中选择Android徽标。 这将带我们到以下屏幕：

The most important thing here is to match up the **Android package name** that you choose here with the one inside of our application. The structure of this is done like so: `com.example.app`.

这里最重要的是将您在此处选择的**Android软件包名称**与应用程序内部的**名称**进行匹配。 这样做的结构是这样的： `com.example.app` 。

Once you’ve decided on a name, head over to `android/app/build.gradle` and update the `applicationId` to match this:

确定名称后，转到`android/app/build.gradle`并更新`applicationId`以匹配此名称：

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "io.paulhalliday.myapp"
    }

You can skip the nickname and debug signing keys at this stage. Select “Register app” to continue.

您可以在此阶段跳过昵称并调试签名密钥。 选择“注册应用”继续。

### 步骤2：下载配置文件 **(**Step 2: Download config file**)** ###

The next step is to add the Firebase configuration file into our Flutter project. This is important as it contains the API keys and other critical information for Firebase to use.

下一步是将Firebase配置文件添加到我们的Flutter项目中。 这很重要，因为它包含Firebase要使用的API密钥和其他关键信息。

Select “Download `google-services.json`” from this page.

从此页面选择“下载`google-services.json` ”。

Once you’ve got this, take the file and place it inside of the `android/app` directory within the Flutter project.

一旦掌握了这些，就把文件放到Flutter项目中的`android/app`目录中。

### 步骤3：添加Firebase SDK **(**Step 3: Adding the Firebase SDK**)** ###

We’ll now need to update our Gradle configuration to include the Google Services plugin. Open up `android/build.gradle` and modify it to include the following:

现在，我们需要更新Gradle配置，使其包含Google Services插件。 打开`android/build.gradle`并将其修改为包括以下内容：

buildscript {
      repositories {
        // Check that you have the following line (if not, add it):
        google()  // Google's Maven repository
      }
      dependencies {
        ...
        // Add this line
        classpath 'com.google.gms:google-services:4.3.2'
      }
    }
    
    allprojects {
      ...
      repositories {
        // Check that you have the following line (if not, add it):
        google()  // Google's Maven repository
        ...
      }
    }

Finally, update the app level file at `android/app/build.gradle` to include the following:

最后，更新`android/app/build.gradle`上的应用程序级别文件，以包括以下内容：

apply plugin: 'com.android.application'
    
    dependencies {
      // add the Firebase SDK for Google Analytics
      implementation 'com.google.firebase:firebase-analytics:17.2.0'
      // add SDKs for any other desired Firebase products
      // https://firebase.google.com/docs/android/setup#available-libraries
    }
    ...
    // Add to the bottom of the file
    apply plugin: 'com.google.gms.google-services'

With this update, we’re essentially applying the Google Services plugin as well as looking at how other Flutter Firebase plugins can be activated such as Analytics.

通过此更新，我们实质上将应用Google Services插件，并研究如何激活其他 Flutter Firebase插件(例如Google Analytics(分析))。

From here, run your application on an Android device or simulator. If everything has worked correctly, you should get the following message in the dashboard:

在这里，在Android设备或模拟器上运行您的应用程序。 如果一切正常，您应该在仪表板中收到以下消息：

Next up, let’s add iOS support!

接下来，让我们添加iOS支持！

## 添加iOS支持 **(**Adding iOS support**)** ##

In order to add Firebase support for iOS, we have to follow a similar set of instructions.

为了添加对iOS的Firebase支持，我们必须遵循一组类似的说明。

Head back over to the dashboard and select `Add app` and then iOS icon to be navigated to the setup process.

回到仪表板，选择`Add app` ，然后选择iOS图标以导航到设置过程。

### 步骤1：注册一个应用 **(**Step 1: Register an app**)** ###

Once again, we’ll need to add an iOS Bundle ID which I’m keeping the same as Android for consistency:

再一次，我们需要添加一个iOS Bundle ID，为了保持一致性，我将其与Android保持相同：

You’ll then need to make sure this matches up by opening the iOS project up in Xcode at `ios/Runner/Runner.xcodeproj` and changing the `Bundle identifier` under `General`:

然后，您需要通过在`ios/Runner/Runner.xcodeproj`中的Xcode中打开iOS项目并更改`General`下的`Bundle identifier`来确保匹配。

Click “Register app” to move to the next screen.

单击“注册应用程序”以移至下一个屏幕。

### 步骤2：下载配置文件 **(**Step 2: Download config file**)** ###

In this step we’ll need to download the configuration file and add this to our Xcode project.

在这一步中，我们需要下载配置文件并将其添加到我们的Xcode项目中。

Download `GoogleService-Info.plist` and drag this into the root of your Xcode project within `Runner`:

下载`GoogleService-Info.plist`并将其拖到`Runner`中的Xcode项目的根目录中：

It’s important that you don’t simply drag this into the folder without going through Xcode, as this will not work.

重要的是不要简单地将其拖到文件夹中而不通过Xcode，因为这将不起作用。

That’s it! You’ll also be happy to know that we can skip the rest of the steps from here on out.

而已！ 您也很高兴知道我们可以从这里开始跳过其余的步骤。

## 结论 **(**Conclusion**)** ##

We’ve now learned how to set up and ready our Flutter applications to be used with Firebase in the near future.

现在，我们已经学习了如何设置和准备Flutter应用程序，以便在不久的将来与Firebase一起使用。

In future articles we’ll look at how to use Firebase features such as Cloud Firestore, Authentication, Analytics, and more with Flutter.

在以后的文章中，我们将研究如何在Flutter中使用Firebase功能，例如Cloud Firestore，身份验证，分析等。

> 翻译自: [https://www.digitalocean.com/community/tutorials/flutter-firebase-setup][https_www.digitalocean.com_community_tutorials_flutter-firebase-setup]

[FlutterFire]: https://github.com/FirebaseExtended/flutterfire
[https_console.firebase.google.com]: https://console.firebase.google.com
[https_www.digitalocean.com_community_tutorials_flutter-firebase-setup]: https://www.digitalocean.com/community/tutorials/flutter-firebase-setup