Flutter 使用 Firebase

Flutter Mar 1, 2021

目標:本文將一步步帶您整合Firebase至Flutter做使用。

步驟:

  1. 確認當前Flutter SDK branch 位在 stable 1.22.6
  2. 創建Flutter專案,配置packageName(下一步會用到)
  3. 登入Firebase,創建專案,配置iOS, Android的Service檔案(.plist & .json)
  4. Flutter專案中,於pubspec.yaml中引入dependencies項目

內文:

  1. 確認當前Flutter SDK branch 位在 stable 1.22.6
    Screen-Shot-2021-03-01-at-8.38.45-PM
  1. 創建Flutter專案,配置packageName

iOS
Screen-Shot-2021-03-01-at-8.53.59-PM

Android(請一併配置圖中其他設定:minSDK=>21)
Screen-Shot-2021-03-01-at-8.55.51-PM

# 添加這行
apply plugin: 'com.google.gms.google-services'

Screen-Shot-2021-03-01-at-8.57.19-PM

# 添加這行
classpath 'com.google.gms:google-services:4.3.3'

3.(1)登入Firebase,創建專案

Screen-Shot-2021-03-01-at-9.02.49-PM
Screen-Shot-2021-03-01-at-9.03.23-PM
Screen-Shot-2021-03-01-at-9.03.39-PM
Screen-Shot-2021-03-01-at-9.04.42-PM
Screen-Shot-2021-03-01-at-9.07.18-PM

3.(2)於Firebase生成iOS, Android的Service檔案(.plist & .json)
Screen-Shot-2021-03-01-at-9.08.56-PM

3.(3) iOS
填入稍早配置的bundleName
Screen-Shot-2021-03-01-at-9.15.19-PM
下載.plist檔案,依照說明拖曳進去專案中
Screen-Shot-2021-03-01-at-9.15.48-PM
後續步驟都省略掉不手動添加,交由Flutter來做。

3.(4) Android 也是雷同操作,下載完檔案,後續的步驟其實稍早我們已經有做添加了,直接跳過。
Screen-Shot-2021-03-01-at-9.22.44-PM

Done!!!
Screen-Shot-2021-03-01-at-9.26.06-PM

4.Flutter專案中,於pubspec.yaml中引入dependencies項目
Screen-Shot-2021-03-01-at-9.30.45-PM

firebase_core: ^0.5.3  
cloud_firestore: ^0.14.4
# 其他更多依賴...
firebase_auth: ^0.18.4+1
firebase_storage: ^5.2.0

配置完成,在您添加相關程式碼前,不妨兩平台先跑一次試試。

DEMO(Github)

Tags