Flutter + Firebase(一) : 設定環境

LUFOR129
4 min readDec 28, 2018

十二月一直在耍廢打鬥陣,昨天想想必須要在年末時寫一篇,讓今年有始有終。因此努力生出這篇廢文(´・ω・`) 。

首先先把Flutter 和 新的Firebase建立好,成功之後應該會有以下畫面

由於我們這次要做的是Android,點擊小機器人圖案,進入註冊應用程式畫面。

進入flutter目錄底下 /android/app/build.grandle 
找到defaultConfig下的 applicationId 複製下來進行註冊

接下來要生成SHA-1簽證憑證,如果你是用MAC or Linux的話較為簡單,在終端機輸入:

keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

如果你是Window系統,要先找到.android的資料夾,在終端機輸入

keytool -exportcert -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore%USERPROFILE%為.android的位置

輸入完金鑰密碼後 (金鑰默認是android),可以看到以下畫面

複製SHA1並貼上至Firebase並下一步

將google-servces.json下載下來並放入 /android/app/ 資料夾底下並下一步

照著Firebase指示,設定SDK

classpath ‘com.google.gms:google-services:4.0.1’ 放在android/build.gradle

在 /android/app/build.gradle 同樣添加SDK

*注 : dependencies那行不用放

更新

把兩個apply plugin打上去。

下一步後我們來安裝Flutter 依賴

安裝Flutter firebase_database

進入專案目錄底下的pubspec.yaml,firebase_database:

冒號後面的數字為package版本,如果不打東西,則會自動安裝最新版本,儲存pubspec.yaml開始安裝,輸出出現exit code 0代表安裝成功。

重新運行flutter ,如果運行成功則代表安裝成功了,可以開始使用firebase,firebase也會顯示產品註冊完成,主頁會顯示:

可以開始import ‘package:firebase_database/firebase_database.dart’; 來進行firebase的操作了。

IOS的操作也是差不多,跟著Firebase官網的操作將設定SDK放入 /ios/Runner/info.plist

下一篇來講 Firebase RealTime Database的CRUD。

--

--