前言


建立Flutter新專案

  1. 打開cmd並移動到Flutter的目錄下
  2. 輸入flutter create brew_crew(brew_crew為專案名稱)
  3. 建立完成後,cd至brew_crew子目錄,並輸入code .用vscode開啟
  4. 若顯示以下畫面,便代表新專案brew_crew建立完成


建立Firebase新專案

由於Firebase的UI介面會時常更換,所以顯示的畫面可能會有差異,但主要功能還是一樣的

  1. 進入【Firebase官網】,點擊「新增專案」

  2. 輸入專案名稱(以Ninja Brew crew為例),並點擊「繼續」

  3. 關閉Google Analytics功能(此專案用不到),之後點擊「建立專案」

  4. 等它跑完,就成功建立Firebase新專案嘍!

設定App連接資訊

開啟主控台

註冊應用程式

  • 應該會看到以下畫面,就可以開始註冊應用程式了

  • Android套件名稱 :

    找尋套件名稱之方法,會因建立Flutter專案之方法不同而有差別

    1. 如果是用上述方式(用cmd創立專案,並使用vscode開啟) :
      • 開啟vscode,並點開brew_crew/android/app資料夾中的build.gradle

      • 尋找defaultConfig函式

      • 其中的applicationId即為欲輸入的套件名稱

        以上述圖片為例,套件名稱為com.example.brew_crew

    2. 如果是直接在Android Studio中創立Flutter專案 :
      • 在創立Flutter專案時,會開啟到以下畫面 :

      • 欲輸入的套件名稱,即為畫面中的Package name

        以上述圖片為例,套件名稱為com.example.flutterapp

  • 應用程式暱稱 : 自行取名(這裡以Brew crew為例)
  • 偵錯簽署憑證 SHA-1 : 此專案無資料安全之問題,所以不用填

下載設定檔

  1. 點擊下載googleservices.json
  2. 將其移到brew_crew/android/app資料夾中 (如下圖)

新增Firebase SDK

  1. 開啟brew_crew/android中的build.gradle,並找到buildscript函式中的dependencies函式

  2. 複製網頁上的classpath 'com.google.gms:google-services:4.3.4'dependencies函式中 (如下圖)

  3. 開啟brew_crew/android/app中的build.gradle

  4. 複製網頁上的apply plugin: 'com.google.gms.google-services'到文件最下方 (如下圖)

  • 因為較新的版本可能會用相容性問題,所以影片作者建議做以下調整 :
    • 開啟brew_crew/android/app/build.gradle

    • com.google.gms:google-services的版本改成4.0.1(如下圖)

    • 開啟brew_crew/android/build.gradle

    • defaultConfig函式中的minSdkVersion參數改成21(如下圖)

後續步驟

  • App連接已完成,接著點擊「前往主控台」回到控制首頁

測試App連接

  • 開啟你的虛擬機,並執行brew_crew這個專案
  • 順利的話,會成功開啟App,然後終端機也不會跑出錯誤訊息~

安裝Flutter Package