Flutter Firebase集成插件easy_firebase的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter Firebase集成插件easy_firebase的使用

介绍

easy_firebase 帮助您快速实现各种Firebase功能，并节省时间以便专注于UI。

开始使用

设置所需的Firebase功能并按照步骤使用该包：

Android

  • 创建一个Firebase项目

  • 安装并设置 Firebase CLI，可以参考相关指南。

  • 设置您希望使用的功能：

    • 实时数据库
    • Firestore
    • 身份验证
    • 存储

  • 点击添加Android应用程序并按照步骤设置Firebase。将Android的SHA1和SHA256密钥添加到Firebase中。 您可以通过以下命令获取SHA密钥（在Flutter应用文件夹中）：

    cd android
./gradlew signingReport

  • 在应用级别的 build.gradle 中添加这些行：

    DefaultConfig {
    ...
    minSdkVersion 19
    multiDexEnabled true
    ...
}  

dependencies{  
    ...
    // 添加这些行
    implementation 'com.google.firebase:firebase-auth-ktx'
    implementation 'com.android.support:multidex:1.0.3'
    ...
}

  • 项目现在准备好用于：

    • OTP登录
    • Google登录
    • 邮箱认证
    • 匿名登录

  • 对于Facebook登录： 注意：不要使用 flutter_facebook_login 包，此包使用 flutter_login_facebook 。请参考相关指南并执行步骤1、3、4、5和6。（并在Facebook开发者门户中使用哈希值）。

  • 对于 strings.xml ，使用此模板并更新代码：

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Your App Name here.</string>

    <!-- 将 "000000000000" 替换为您的 Facebook 应用 ID -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      将 "000000000000" 替换为您的 Facebook 应用 ID。
      **注意**：方案需要以 `fb` 开头然后是您的ID。
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>

  • 在Firebase控制台中添加给定的 OAuth 重定向URI到您的Facebook应用配置中。现在您的应用已准备好进行Facebook登录。

iOS

  • 创建一个Firebase项目

  • 安装并设置 Firebase CLI，可以参考相关指南。

  • 设置您希望使用的功能：

    • 实时数据库
    • Firestore
    • 身份验证
    • 存储

  • 在 Info.plist 中添加以下行用于 google_sign_in ：

    <!-- 将此放在 [my_project]/ios/Runner/Info.plist 文件中 -->
<!-- Google 登录部分 -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO 替换此值： -->
            <!-- 复制自 GoogleService-Info.plist 的 REVERSED_CLIENT_ID 键 -->
            <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
        </array>
    </dict>
</array>
<!-- 结束 Google 登录部分 -->

  • 将整个工作区的最小iOS版本设置为12。

  • 项目现在准备好用于：

    • OTP登录
    • Google登录
    • 邮箱认证
    • 匿名登录

  • 对于Facebook登录： 注意：不要使用 flutter_facebook_login 包，此包使用 flutter_login_facebook 。请参考相关指南并执行步骤1、3、4和5。（如果同时使用 google-sign 和 facebook ，应将 CFBundleURLSchemes 放在同一 CFBundleURLTypes 中）。

    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string><Reverse_Client_Id></string>
        </array>
    </dict>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>fd<APP_ID></string>
        </array>
    </dict>
</array>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>

  • 现在您的iOS应用已准备好进行Facebook登录。

功能

此包包含以下功能：

  • 认证
    • Google登录
    • 邮箱注册/登录
    • 邮件验证
    • OTP登录
    • 删除邮箱用户
    • 匿名登录
    • 登出
    • Facebook登录/登出
  • Firestore
    • 给定集合和文档的CRUD（创建、读取、更新、删除）
    • 自定义或嵌套集合/文档的Firestore对象
  • 实时数据库
    • 给定节点路径和数据作为Map对象的CRUD（创建、读取、更新、删除）
  • Firebase存储
    • 指定路径下的所有项列表
    • 有限数量的所有项列表
    • 获取指定路径文件的下载URL
    • 从设备或资产上传文件
    • 上传字符串数据
    • 获取指定文件的元文件
    • 下载文件

使用方法

可以在仓库的 sample_example 文件夹中找到示例项目。

// 在您的代码中导入
import 'package:firebase_core/firebase_core.dart';
import 'package:example/firebase_options.dart';

// 在主函数中添加以下内容
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); 
  ...
}

// 使用任何功能只需创建其对象，例如：
var auth = EasyFire().getAuthObject();
var store = EasyFire().getFirestoreObject();
var rtdb = EasyFire().getRtdbObject();
var storage = EasyFire().getStorageObject();

// 使用Google登录
auth.signInWithGoogle();

// 发送数据到Firestore数据库
store.setData('Users','id_123',{'data':123});

// 发送数据到RTDB数据库
rtdb.setData('/data',{'name':'sample'});

// 下载文件（打开文件选择器）
storage.downloadFile(firestorePath: '/sample.png');

// 上传文件（打开文件选择器）
storage.uploadFile();

示例代码

// ignore_for_file: avoid_print

import 'package:easy_firebase/easy_firebase.dart';
import 'package:example/firebase_options.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  var auth = EasyFire().getAuthObject();
  var store = EasyFire().getFirestoreObject();
  var rtdb = EasyFire().getRtdbObject();
  var storage = EasyFire().getStorageObject();
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          _incrementCounter();
          // 使用Google登录
          // await auth.signInWithGoogle();
          // 获取Firestore数据
          // 从Firebase存储下载数据
          store.getData('Users', 'uid').then((value) => print(value));
          // 获取实时数据库数据
          rtdb.getData('/data').then((value) => print(value));
          // 下载文件（打开文件选择器）
          storage.downloadFile(firestorePath: '/sample.png');
          // 上传文件（打开文件选择器）
          storage.uploadFile();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter Firebase集成插件easy_firebase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Firebase集成插件easy_firebase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中集成并使用easy_firebase插件的示例代码。easy_firebase是一个简化的Firebase集成库，用于方便地在Flutter应用中处理Firebase服务。

前提条件

  1. Flutter环境：确保你的Flutter开发环境已经配置完成。
  2. Firebase项目：在Firebase控制台中创建一个项目，并获取相关的配置信息（如google-services.json文件）。

步骤

1. 添加依赖

在你的pubspec.yaml文件中添加easy_firebase依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_firebase: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Firebase

将你的google-services.json文件放到android/app/目录下，并将GoogleService-Info.plist文件放到ios/Runner/目录下。

3. 初始化Firebase

在你的main.dart文件中，初始化easy_firebase：

import 'package:flutter/material.dart';
import 'package:easy_firebase/easy_firebase.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Firebase
  await EasyFirebase.initialize(
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy Firebase Example'),
        ),
        body: FirebaseExample(),
      ),
    );
  }
}

注意：在实际应用中，你可以从google-services.json或GoogleService-Info.plist文件中读取这些配置，而不是硬编码。

4. 使用Firebase服务

以下是一个使用Firebase Authentication进行用户登录的示例：

import 'package:flutter/material.dart';
import 'package:easy_firebase/easy_firebase.dart';

class FirebaseExample extends StatefulWidget {
  @override
  _FirebaseExampleState createState() => _FirebaseExampleState();
}

class _FirebaseExampleState extends State<FirebaseExample> {
  String _authStatus = 'Not Logged In';

  void _signInAnonymously() async {
    try {
      await EasyFirebaseAuth.signInAnonymously();
      setState(() {
        _authStatus = 'Logged In Anonymously';
      });
    } catch (e) {
      print('Error signing in anonymously: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Auth Status: $_authStatus',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _signInAnonymously,
            child: Text('Sign In Anonymously'),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们定义了一个按钮，当用户点击按钮时，将使用Firebase的匿名登录功能进行登录，并更新UI显示登录状态。

注意事项

  • 确保你的Firebase项目配置正确，并且已经启用了所需的Firebase服务（如Authentication）。
  • 根据你的需求，你可能需要配置更多的Firebase服务，如Firestore、Storage等，并参考easy_firebase的文档进行相应的集成和使用。

这个示例提供了一个基本的集成框架，你可以根据实际需求进行扩展和修改。

回到顶部