【簡單】Flutter應用的FireBase連接步驟!!

這次,我們將介紹如何在Flutter應用程式中使用Firebase。基本上,是根據官方的以下步驟進行的。

<官方>將Firebase添加到Flutter應用程式

但對我來說,有很多困難的地方,因此也會介紹一些解決方法。

環境

我的環境如下。

  • Windows 11
  • VSCode
  • Flutter 3.22.3
  • Google Pixel [Android](用於調試的手機)

準備事項

要進行此步驟,需要以下事項。

此時,不需要準備新的Firebase專案。已經建立專案的話,可以使用現有的專案。

安裝Firebase CLI

Firebase CLI 是用於連接Firebase的命令行介面(CLI)。
要訪問Firebase,需要Firebase CLI。

請參考以下官方步驟進行安裝。
<官方>Firebase CLI 參考資料

我想在VSCode的終端執行,所以使用npm進行安裝。參考以下npm的安裝步驟。

安裝Node.js

如果已經安裝,可以略過此步驟。
請從以下鏈接下載Node.js安裝程序,並安裝Node.js。
https://nodejs.org/

安裝Firebase CLI

請在終端執行以下命令。

npm install -g firebase-tools

這樣,Firebase CLI 就準備完成了。

登入Firebase

在終端執行以下命令,登錄Firebase。

firebase login

隨後會打開Google帳戶頁面,請選擇管理帳戶。

安裝FlutterFire CLI

FlutterFire CLI 是一組用於將Flutter應用程式連接到Firebase的Flutter插件。
請在終端執行以下命令,登錄Firebase。

dart pub global activate flutterfire_cli

設置Flutter應用程式的Firebase連接

請在終端執行以下命令,設置Firebase連接。

flutterfire configure

錯誤:flutterfire: command not found

執行上述命令時,可能會發生「flutterfire: command not found(’flutterfire’ 未被識別為內部或外部命令、可運行程式或批處理文件。)」的錯誤。

通過設置系統環境變量可以解決此錯誤。

請將以下路徑添加到系統環境變量的Path中。

C:\Users\{UserName}\AppData\Local\Pub\Cache\bin

錯誤:FirebaseCommandException

解決上述錯誤後,可能會出現「FirebaseCommandException: An error occured on the Firebase CLI when attempting to run COMMAND: firebase projects:list –json」的新錯誤。

這是因為登錄不成功,請在終端執行以下命令,重新登錄。

firebase login --reauth

選擇專案

執行「flutterfire configure」後,系統會詢問您選擇哪個專案,
請選擇現有專案或選擇「create a new project」來創建新專案。

選擇專案後,選擇平台,Firebase的設置將反映在Flutter應用程式專案中。

安裝firebase_core

在pubspec.yaml中添加firebase_core。(版本可選)

dependencies:
  firebase_core: ^3.2.0

設置main.dart

在main.dart中編寫連接Firebase的初始化代碼。

Future<void> main() async {
  // firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

運行後發生錯誤…

在我設置完上述內容並以調試模式運行後,出現了以下錯誤。顯示找不到「com.google.gms:google-services」的classpath。

Could not find method classpath() for arguments [com.google.gms:google-services:4.3.15]
 on root project 'android' of type org.gradle.api.Project.

解決方法

修改以下三個文件。

  • android\build.gradle
  • android\settings.gradle
  • android\app\build.gradle

android\build.gradle

刪除「buildscript」部分。

- buildscript {
-     ext.kotlin_version = '1.7.10'
-     repositories {
-         google()
-         mavenCentral()
-     }
-     dependencies {
-         // START: FlutterFire Configuration
-         classpath 'com.google.gms:google-services:4.3.15'
-         // END: FlutterFire Configuration
-         classpath 'com.android.tools.build:gradle:7.3.0'
-         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-     }
- }

 allprojects {
     repositories {
         google()
         mavenCentral()
     }
 }

android\settings.gradle

在「plugins」中添加「com.google.gms.google-services」。(版本可選)

 plugins {
     id "dev.flutter.flutter-plugin-loader" version '1.0.0'
     id "com.android.application" version '7.3.0' apply false
     id "org.jetbrains.kotlin.android" version '1.7.10' apply false
+    id "com.google.gms.google-services" version '4.3.15' apply false
 }

android\app\build.gradle

刪除「apply plugin: ‘com.google.gms.google-services’」,並按照以下添加「id “com.google.gms.google-services”」。

 plugins {
     id "com.android.application"
-    // START: FlutterFire Configuration\
-    apply plugin: 'com.google.gms.google-services'
+    id "com.google.gms.google-services"
-    // END: FlutterFire Configuration
     id "org.jetbrains.kotlin.android"
     id "dev.flutter.flutter-gradle-plugin"
 }

仍然出現錯誤…

再次調試運行後,出現了以下消息。看起來minSdkVersion版本不合適。

│ android {                                                                                     │
│   defaultConfig {                                                                             │
│     minSdkVersion 23                                                                          │
│   }                                                                                           │
│ }                                                                                             │
│                                                                                               │
│ Following this change, your app will not be available to users running Android SDKs below 23. │
│ Consider searching for a version of this plugin that supports these lower versions of the     │
│ Android SDK instead.                                                                          │
│ For more information, see:                                                                    │
│ https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration          │
└───────────────────────────────────────────────────────────────────────────────────────────────┘
Error: Gradle task assembleDebug failed with exit code 1

解決方法1

在android\build.gradle中,有如下內容,請按以下進行修改。

 defaultConfig {
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 23
 }

解決方法2

或者,可以修改Flutter JDK中以下文件中minSdkVersion的預設值。
“…\flutter\packages\flutter_tools\gradle\src\main\groovy\flutter.groovy”

 class FlutterExtension {

     /** Sets the compileSdkVersion used by default in Flutter app projects. */
     public final int compileSdkVersion = 34

     /** Sets the minSdkVersion used by default in Flutter app projects. */
-    public  final int minSdkVersion = 19
+    public  final int minSdk

Version = 23

因為以後建立的應用程式也可能會訪問Firebase,所以我選擇了這種方法。

確認可以進行調試!

再次調試運行,成功了!

Launching lib\main.dart on Pixel X in debug mode...
Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8

√ Built build\app\outputs\flutter-apk\app-debug.apk
Connecting to VM Service at ws://127.0.0.x:xxxx/vv-oYScA6OI=/ws
标题和URL已复制