FlutterFire 初體驗

發表於 更新於 分類於 ， ， 文章字數： 1.1k 所需閱讀時間 ≈ 2 分鐘

簡介

有一天心血來潮看到Firebase有支援Flutter的生態系，
其名為FlutterFire，便寫下這篇安裝紀錄。

工具介紹

Firebase

為過去幾年新起的，提供跨平台後端服務的雲端平台，
平台包括Android、IOS、Web提供多樣化的功能，
包含驗證、社群、資料庫、與託管等服務。
https://firebase.google.com/

FlutterFire

Firebase提供Flutter的後端串接API服務，其平台稱為FlutterFire。

Authentication

https://firebase.flutter.dev/
提供多樣化社群認證的服務，包括Google、Facebook、Microsoft、Twitter。

Cloud Firestore

Firestore Database為No-SQL的資料庫。
https://firebase.google.com/docs/firestore/data-model

FlutterFire

Installation

dart 指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Usage: dart <command|dart-file> [arguments]

Global options:
-h, --help                 Print this usage information.
-v, --verbose              Show additional command output.
    --version              Print the Dart SDK version.
    --enable-analytics     Enable analytics.
    --disable-analytics    Disable analytics.

Available commands:
analyze    Analyze Dart code in a directory.
compile    Compile Dart to various formats.
create     Create a new Dart project.
devtools   Open DevTools (optionally connecting to an existing application).
doc        Generate API documentation for Dart projects.
fix        Apply automated fixes to Dart source code.
format     Idiomatically format Dart source code.
migrate    Perform null safety migration on a project.
pub        Work with packages.
run        Run a Dart program.
test       Run tests for a project.

flutter 指令

1
flutter pub add 套件名稱
1
flutter pub add flutterfire_ui

更新指令

1
flutter pub upgrade 套件名稱
1
flutter pub upgrade flutterfire_ui

Step 1: Install the required command line tools

Firebase CLI

https://firebase.google.com/docs/cli

1
npm install -g firebase-tools
1
2
```
    firebase login:ci
1
firebase init
1
firebase projects:list

Step 2: Configure your apps to use Firebase

FlutterFire CLI

FlutterFire Installation

1
flutter pub add firebase_core

Initializing FlutterFire

1
dart pub global activate flutterfire_cli
1
firebase login
1
flutterfire configure

Path Error Problems

添加環境變數

1
C:\Users\Lena\AppData\Local\Pub\Cache\bin

Step 3: Initialize Firebase in your app

lib/main.dart

1
2
3
// Import the generated file
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
1
2
3
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);

Rebuild your Flutter application

1
flutter run

Step 4: Configure

android/app/build.gradle

1
2
3
4
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
1
2
3
4
5
6
7
8
9
10
11
defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.fluttercrud"
    // You can update the following values to match your application needs.
    // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
    minSdkVersion 19
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    multiDexEnabled true
}
1
2
3
4
5
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation platform('com.google.firebase:firebase-bom:31.1.1')
    implementation 'com.google.firebase:firebase-analytics-ktx'
}

android/build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.1.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

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