Flutter 接入 firebase 快速构建应用

KenXu
4,739 阅读2分钟

对于flutter 接入 firebase 所遇到的问题 以及解决方案

Why Firebase

Firebase 为后台开发提供以下几个功能

  • 实时数据库（Realtime database）
  • 用户认证（Authentication）
  • 自定义API（Cloud function）
  • 消息推送（Cloud messaging）
  • 静态网页Hosting
  • 云存储（Cloud storage）
  • 实时监控（Analytics）

为了快速验证flutter方案的可行性以及高效的落地方案，我们采取了接入firebase的方式解决服务问题，目前flutter ui app已经接入了 Analytics（支持 IOS Android）并且实现了app的综合统计监控

接入方式

点击 console.firebase.google.com/u/0/

填上包名以及其他相关信息 flutter Android 对修改包名不太友好 需要重命名 android/app/src/main/java 里面的文件路径为包文件 并且需要更改 MainActivity.java 以及 android/app/src/AndroidManifest.xml 的包名

Android 接入

  • 下载 google-services.json 到 android/app/google-services.json
  • android/build.gradle 增加:
buildscript {
    ......
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'com.google.gms:google-services:4.2.0' //firebase 注意 Android studio 提示版本进行更新
    }
}
  • android/app//build.gradle 增加:
dependencies {
    ......
    implementation 'com.google.firebase:firebase-core:16.0.7' //firebase 注意 Android studio 提示版本进行更新
}

apply plugin: 'com.google.gms.google-services' //firebase支持 加到最后一行

IOS 接入

  • 下载 GoogleService-Info.plist 到 ios/Runner/GoogleService-Info.plist 如果xcode读取不到文件 需要导入到项目
  • 修改 ios/Runner/AppDelegate.m
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"

@import Firebase;//增加 firebase 支持

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    [FIRApp configure];//增加 firebase 支持
    
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

完成以上步骤后 删除app 重新 flutter run -v 可以看到 firebase 相关日志 最后ios 跟安卓都会出现 成功提示如下图

firebase_analytics 库引入

修改 pubspec.yaml 增加

dependencies:
  firebase_analytics: ^2.0.3

安装包

flutter packages get

封装工具包并且引入到项目

lib/utils/analytics.dart

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';

//统计
FirebaseAnalytics analytics = FirebaseAnalytics();
FirebaseAnalyticsObserver observer =
    FirebaseAnalyticsObserver(analytics: analytics);

lib/main.dart

import 'package:efox_flutter/utils/analytics.dart' as Analytics;
......
class MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    MaterialApp(
        ......
        navigatorObservers: <NavigatorObserver>[Analytics.observer],//加入路由统计
      );
  }
}

其他调用

import 'package:efox_flutter/utils/analytics.dart' show analytics;
analytics.logEvent(name: 'component', parameters: {'name': itemInfo.title});

增加上面代码后需要在firebase 管理后台增加 name关键字统计

总结

完成以上步骤后 flutter 就可以完美集成firebase 目前Analytics 帮助我们找到很多程序上遇到的问题 后面篇幅我们也会对firebase 其他服务进行刨析 有兴趣的同学可以一起探讨

avatar
文章
阅读
粉丝