用FlutterFire插件将Firebase添加到您的Flutter应用中-六虎

Firebase帮助你开发、衡量、改进和发展你的移动应用。它得到了谷歌的支持，涵盖了广泛的服务，包括实时数据库、认证、崩溃监测、分析、推送通知等。Firebase将所有这些后端、平台相关的工具作为一项服务来提供，因此你可以更专注于构建应用的核心功能。

FlutterFire是一套官方插件，使你能够在你的Flutter应用中实现Firebase服务。稳定版已经提供了各种关键的插件，预计在不久的将来会有更多的插件出现。

在本教程中，我们将演示如何集成一些最有用的 FlutterFire 插件，包括。

认证
云火库
远程配置
崩溃分析（Crashlytics
分析学

我们还将通过一些实际的例子，使您能够看到这些FlutterFire插件的运行。

在开始我们的教程之前，让我们分解一下我们将如何在我们的示例应用程序中使用每个FlutterFire插件。

我们将建立一个虚拟游乐场游戏，其中通过认证插件认证的用户控制一个在蹦床上跳跃的角色。跳跃次数将被同步到Cloud Firestore。我们将使用远程配置来改变背景，而不推送应用程序的更新。最后，我们将分别使用Analytics和Crashlytics插件处理重要事件和崩溃。

创建和配置你的Firebase项目

第一步是在Firebase控制台中创建一个项目，并配置本地的Android/iOS和Flutter应用来使用Firebase服务。

要在Firebase控制台中创建一个项目。

前往Firebase控制台
点击添加项目
输入项目名称并点击继续
保持为这个项目启用Google Analytics的状态，然后点击继续
选择谷歌分析账户，然后点击创建项目

配置一个安卓应用

一旦项目被创建，你应该能够看到项目的仪表盘。要设置安卓项目。

点击安卓图标
输入软件包名称和SHA-1密钥，然后在注册部分点击注册应用
下载google-services.json ，并把它放在安卓应用目录中。它应该看起来像这样。android/app/google-services.json
添加Firebase的依赖关系，如添加Firebase SDK部分所述
点击继续进入控制台

配置一个iOS应用

由于Flutter是为跨平台应用开发而设计的，我们也来为原生的iOS应用配置一下。

在项目仪表板上，点击添加应用程序按钮
点击iOS图标
输入捆绑的ID，然后在注册部分点击注册应用
打开Xcode，下载GoogleService-Info.plist 文件，并拖放到Runner子文件夹中
按照 “添加Firebase SDK “和 “添加初始化代码 “部分的说明进行操作
点击继续到控制台

设置一个Flutter项目

要使用任何Firebase服务，你首先需要安装的最重要的插件是 firebase_core，它使应用程序能够与Firebase通信。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1

添加 firebase_core依赖关系，如上图所示，在pubspec.yaml 文件中，输入pub get 命令。

flutter pub get

认证

对于任何移动应用程序来说，认证是一个非常重要的功能。用户可能会向你的应用程序上传个人和潜在的敏感信息，所以能够验证用户的身份是最重要的。

Firebase认证提供了后台服务和易于使用的SDK来验证你的应用程序的用户。它支持使用密码、电话号码以及通过第三方平台（如谷歌、Facebook、Twitter、GitHub和苹果）进行认证。我们将使用Firebase_auth插件在我们的应用程序中实现认证。

在Firebase控制台启用认证

在我们开始在我们的应用程序中集成firebase_auth插件之前，我们首先需要在Firebase控制台中启用认证。

在左边的菜单中点击认证
选择签到方式标签
点击Google，打开启用开关，然后从列表中选择支持邮件。你可以选择任何登录方式，但在本教程中，我们选择谷歌，因为我们要实现谷歌的登录。
点击下一步

启用认证后，你将需要再次下载google-services.json 和GoogleService-Info.plist 。你可以找到这两个文件，如下图所示。

添加依赖性

添加 firebase_auth和 google_sign_in在pubspec.yaml ，如下图所示。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 #new
  google_sign_in: ^5.0.0 #new

实现认证的代码

在应用程序的开始阶段初始化Firebase服务，像这样。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp()),
}

添加通过谷歌登录的方法。

static Future<User?> signInWithGoogle() async {
  FirebaseAuth _auth = FirebaseAuth.instance;
  try {
    UserCredential userCredential;
    if (kIsWeb) {
      var googleProvider = GoogleAuthProvider();
      userCredential = await _auth.signInWithPopup(googleProvider);
    } else {
      final GoogleSignInAccount googleUser = (await GoogleSignIn().signIn())!;
      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;
      final googleAuthCredential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      userCredential = await _auth.signInWithCredential(googleAuthCredential);
    }
    final user = userCredential.user;
    return user;
  } catch (e) {
    print(e);
  }
}

我们还需要建立一个签出方法。

static Future<void> signOut({required BuildContext context}) async {
  final GoogleSignIn googleSignIn = GoogleSignIn();
  try {
    if (!kIsWeb) {
      await googleSignIn.signOut();
    }
    await FirebaseAuth.instance.signOut();
  } catch (e) {
    print(e);
  }
}

这一切是如何一起工作的。

Cloud Firestore

Cloud Firestore是一个灵活、可扩展的NoSQL云数据库，可以实时存储和同步数据。cloud_firestore插件为移动和网络提供实时听众和离线支持。无论你的互联网连接情况如何，它在所有情况下都能很好地工作。它也被称为Firestore数据库。

在Firebase控制台创建一个数据库
要在我们项目的Firebase控制台创建一个数据库。

点击左侧菜单中的Firestore数据库**。
点击创建数据库按钮
为了开始，选择在测试模式下启动的选项
点击启用

设置访问数据库的规则

我们不想让数据库处于开放状态，所以让我们通过设置以下规则来限制数据库的访问，只有通过认证的用户才能访问。

rules_version = ‘2’;
service cloud.firestore {
 match /databases/{database}/documents {
 match /{document=**} {
 allow read, write: if request.auth != null;
  }
 }
}

添加依赖性

添加 cloude_firestore依赖关系，如下图所示：在pubspec.yaml 中添加和依赖关系，如下图所示。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 
  google_sign_in: ^5.0.0 
  cloud_firestore: ^2.2.0 #new

实施代码

在演示应用程序中，一旦用户登录，我们将在Cloud Firestore中存储用户数据，如下所示。

User? user = await Authentication.signInWithGoogle();
if (user != null) {
  database.storeUserData(user: user);
  Navigator.of(context).pushReplacement(
    MaterialPageRoute(
      builder: (context) => Home(
        user: user,
      ),
    ),
  );
}
//----------------------------------------------------
storeUserData({required User user}) async {
  AppUser appUser = AppUser(uid: user.uid, name: user.displayName, jumps: 0);
  await userCollection
      .doc(user.uid)
      .set(appUser.toJson())
      .then((value) => print("User Added"))
      .catchError((error) => print("Failed to add user: $error"));
}

我们将使用下面的方法把登录用户的跳转次数存储并同步到Firestore数据库中。

ElevatedButton(
  style: ElevatedButton.styleFrom(primary: Colors.red),
  onPressed: () async {
    _jumpCount++;
    _datebase.updateJumpCount(
        user: _user, jumpCount: _jumpCount);
  },
  child: Text(
    'Jump',
    style: TextStyle(fontSize: 34),
  ),
),
//---------------
updateJumpCount({required User user, required int jumpCount}) async {
  await userCollection
      .doc(user.uid)
      .update({'jumps': jumpCount})
      .then((value) => print("User Added"))
      .catchError((error) => print("Failed to add user: $error"));
}

现在让我们添加代码，使用实时监听器在仪表板上显示跳转次数。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
      color: Colors.grey.withOpacity(0.5),
      border: Border.all(width: 1, color: Colors.black)),
  child: StreamBuilder<QuerySnapshot>(
    stream: _usersStream,
    builder: (BuildContext context,
        AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
        return Text('Something went wrong');
      }
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Text("Loading");
      }
      return Expanded(
        child: new ListView(
          children: snapshot.data!.docs
              .map((DocumentSnapshot document) {
            return Text(
              '${(document.data() as Map)['name']} : ${(document.data() as Map)['jumps']}',
              style:
                  TextStyle(fontSize: 18, color: Colors.black),
            );
          }).toList(),
        ),
      );
    },
  ),
)

正如你所看到的，跳数在Firestore数据库中更新并实时显示在仪表板上。

远程配置

远程配置插件允许你即时改变你的移动应用程序的行为和外观。这意味着你可以在不发布新应用更新的情况下改变应用内部的几乎任何东西。

最初，应用程序将从应用程序中可用的远程配置中读取默认值。后来，当需要时，它可以从远程配置中获取新的值。你可以控制需要改变的内容，并且这些改变会应用于所有或特定的一部分用户。

在Firebase控制台设置远程配置值

在我们的演示应用程序中，我们将使用远程配置来控制后台。下面是设置这些值的步骤。

在项目仪表板上，向下滚动并选择远程配置
将键添加为background，将值添加为mountain，以便在应用程序打开时加载mountain的背景。
点击两次发布更改

添加依赖性

添加 firebase_remote_config依赖关系，如下所示：pubspec.yaml 。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 
  google_sign_in: ^5.0.0 
  cloud_firestore: ^2.2.0
  firebase_remote_config: ^0.10.0+2 #new

在代码中获取远程配置值

现在让我们写一些代码来在应用程序中设置Remote Config。下面的代码还设置了默认值，这样应用程序就可以在首次启动时读取和表现。

Future<RemoteConfig> setupRemoteConfig() async {
  await Firebase.initializeApp();
  final RemoteConfig remoteConfig = RemoteConfig.instance;
  await remoteConfig.setConfigSettings(RemoteConfigSettings(
    fetchTimeout: const Duration(seconds: 10),
    minimumFetchInterval: Duration.zero,
  ));
  await remoteConfig
      .setDefaults(<String, dynamic>{'background': 'mountains'});
  RemoteConfigValue(null, ValueSource.valueStatic);
  return remoteConfig;
}

添加以下代码来获取并加载关键背景的新值。UI会相应地反映出来。

FutureBuilder<RemoteConfig>(
  future: _datebase.setupRemoteConfig(),
  builder: (BuildContext context,
      AsyncSnapshot<RemoteConfig> snapshot) {
    if (snapshot.hasData) {
      _fetchLatestRemoteConfig(snapshot.requireData);
      return Image.asset(
        snapshot.requireData.getString('background') ==
                'mountains'
            ? 'assets/images/green_background.png'
            : 'assets/images/beach.png',
        fit: BoxFit.fill,
      );
    } else {
      return Image.asset(
        'assets/images/green_background.png',
        fit: BoxFit.fill,
      );
    }
  },
),

如上图所示，这就把背景从山脉变成了海滩，同时也改变了重启时应用中的图片背景。

崩溃分析

在开发移动应用时，你不可能抓住所有的错误，这就是崩溃监控系统的作用。Crashlytics插件可以帮助你实时捕捉致命的错误。

在Firebase控制台启用Crashlytics

从左边的菜单中，点击Crashlytics，然后点击启用按钮。

添加依赖关系

添加 firebase_crashlytics在pubspec.yaml 中添加依赖关系，如下图所示。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 
  google_sign_in: ^5.0.0 
  cloud_firestore: ^2.2.0
  firebase_remote_config: ^0.10.0+2
  firebase_crashlytics: ^2.0.6 #new

添加代码来捕捉错误

下面是初始化Crashlytics并捕捉任何未捕捉到的错误的代码。

//Crashlytics
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
// Pass all uncaught errors to Crashlytics.
Function originalOnError = FlutterError.onError as Function;
FlutterError.onError = (FlutterErrorDetails errorDetails) async {
  await FirebaseCrashlytics.instance.recordFlutterError(errorDetails);
  // Forward to original handler.
  originalOnError(errorDetails);
};

你可以通过简单地在任何地方写下面的代码来测试抓取错误。

//Force crash
FirebaseCrashlytics.instance.crash();

在你的Firebase控制台中，它看起来会是这样的。

分析

分析插件可以帮助你发现用户究竟是如何使用你的应用的，并提供你可以用来改善用户体验的数据。该插件为多达500个不同的事件提供无限的报告。

我们已经选择为我们的演示应用程序启用分析功能，所以我们将开始在我们的应用程序中进行整合。

添加依赖性

添加 firebase_anlytics在pubspec.yaml 中添加依赖关系，如下图所示。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 
  google_sign_in: ^5.0.0 
  cloud_firestore: ^2.2.0
  firebase_remote_config: ^0.10.0+2
  firebase_crashlytics: ^2.0.6
  firebase_analytics: ^8.1.2 #new

记录事件

有很多预定义的事件可以记录，如购买、添加到购物车、登录等。对于我们的例子，让我们尝试添加一个登录事件。

ElevatedButton(
  onPressed: () async {
    User? user = await Authentication.signInWithGoogle();
    if (user != null) {
      database.storeUserData(user: user);
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (context) => Home(
            user: user,
          ),
        ),
      );
      await analytics.logLogin();
    }
  },
  child: Text('Sign in with Google'),
)

你也可以像这样记录自定义事件。

Future<void> _testSetCurrentScreen() async {
  await analytics.setCurrentScreen(
    screenName: 'Analytics Demo',
    screenClassOverride: 'AnalyticsDemo',
  );
}

下面是你如何看到所有记录的事件。

完整的源代码可以在GitHub上找到。

总结

在本教程中，我们学习了如何在Flutter应用中集成FlutterFire插件Authentication、Cloud Firestore、Remote Config、Crashlytics和Analytics。然后，我们构建了一个示例应用程序，以展示这些FlutterFire插件如何在实际应用中一起工作。最后，我们演示了如何使用FlutterFire插件来测试你的应用程序的错误，并收集数据以帮助你改善用户体验。

The postAdd Firebase to your Flutter app with FlutterFire pluginsappeared first onLogRocket Blog.

用FlutterFire插件将Firebase添加到您的Flutter应用中

创建和配置你的Firebase项目

配置一个安卓应用

配置一个iOS应用

设置一个Flutter项目

认证

在Firebase控制台启用认证

添加依赖性

实现认证的代码

Cloud Firestore

添加依赖性

实施代码

远程配置

在Firebase控制台设置远程配置值

添加依赖性

在代码中获取远程配置值

崩溃分析

在Firebase控制台启用Crashlytics

添加依赖关系

添加代码来捕捉错误

分析

记录事件

总结

相关文章

android刷机root + 爬取app接口数据，心得分享

UIStackView 使用指南

Android中高级进阶开发面试题冲刺合集（八）【Flutter篇】

Android 11 下 Toast 变化，不能自定义 Toast 了？

作者信息