今回は、FlutterアプリにFirebaseの導入をやっていこうと思います!
Firebaseは、Baasなので認証機能やDBなど様々なバックエンド機能を簡単に利用することができます!
もし、まだFlutterの開発環境構築がまだの方は、「FlutterとDartの開発環境構築をしよう!」を参考にしてみてください!
わしはFirebaseなんて初めて聞いたぞ!
学習に使った本はこちら!
Amazon Kindle Unlimited でもFlutter、Dartの本はいっぱいあるぞ!
Firebaseの設定をする!
まずは、Firebaseのプロジェクトの作成をしよう!
Firebaseのプロジェクトを作成
- Firebaseのアカウントを開設する。
- プロジェクトを追加を押下
- プロジェクト名を入力して、続行ボタンを押下
- Googleアナリテクスアカウントを選択して、プロジェクト作成ボタンを押下
(別途アカウントを作成する必要があるかもしれません。) - プロジェクトの作成が終わったら、続行ボタンを押下
- こんな画面が表示されたらプロジェクト作成は完了です!
iOSの設定をする!
次は、iOSでFirebaseを使えるようにしていこう!
念のためですが、Firebaseの設定をしていく際に出てくる画面は、Swift用なので参考にしてはいけません。
(エラーが出てしまいます。)
Flutterの場合は、必ずこちらの手順を参考するようにしてください!
アプリの登録
- 追加するアプリのアイコンを選択(今回は、iOSのアイコンを選択してください。)
- iOSバンドルIDを入力
- 【参考】iOSバンドルIDは、XcodeでRunnerを開くと確認することができます。
(基本的にはアプリ名になっているはずです。)
- 「GoogleService-info.plistをダウンロード」を押下
- ダウンロードしたファイルをXcodeで[Runner/Runner]配下に配置する
- 続いて設定画面では、Firebase SDKの追加をやっていくようになっていますが、これをやるとFlutterではビルド時にエラーになってしまうので、そのまま「次へ」ボタンを押しましょう!
- 初期化コードの追加もFlutterでは不要ですので、「次へ」ボタンを押して問題ありません。
- ここまでできれば、アプリの登録は完了です!
FlutterFireプラグインを追加
ここからはFlutterのみに必要な手順だよ!
- pubspec.yamlにFlutterFireプラグインを追加
(最新を検索して導入してください。今回使うものは下記ですが他にもプラグインは色々あります。) - 【参考】firebase_core(必須):https://pub.dev/packages/firebase_core
- 【参考】firebase_analytics(アナリテクスが必要な人):https://pub.dev/packages/firebase_analytics
- 【参考】firebase_auth(認証機能を使う人):https://pub.dev/packages/firebase_auth
- 【参考】cloud_firestore(FireStoreを使う人):https://pub.dev/packages/cloud_firestore
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
firebase_core: ^1.3.0
firebase_analytics: ^8.1.2
firebase_auth: ^2.0.0
cloud_firestore: ^2.3.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
- pubspec.yamlの設定が終わったら、Pub getを実行しましょう!(コマンドでも構いません。)
これでiOSの設定は完了です!
意外と大変じゃの〜
Androidの設定をする!
最後に、AndroidでFirebaseを使えるようにしていこう!
アプリを登録
- Androidパッケージ名を入力して、「アプリを登録」ボタンを押下
- 【参考】Androidパッケージ名は、android/app/build.gradle のapplicationIdを入力してください。
- 「google-service.jsonをダウンロード」ボタンを押下して、設定ファイルをウンロードする。
- 設定ファイルを[android/app]配下に配置する
- [android/build.gradle]にFirebase SDKを追加
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:4.3.8'
}
}
allprojects {
repositories {
google()
jcenter()
}
}
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
delete rootProject.buildDir
}
- [android/app/build.gradle]にFirebase SDKを追加
- 【注意】アプリレベルのbuild.gradleはFlutterは別設定になっているので、注意してください。
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}
def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}
def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'
android {
compileSdkVersion 30
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.shopping_list"
minSdkVersion 16
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
}
flutter {
source '../..'
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
- 最後にpubspec.yamlに移動して、Pub getを実行(コマンドでも構いません。)
これでAndroidの設定も完了です!
Androidは簡単じゃったの。
最後に!
今回は、FlutterでFirebaseを使うための設定をやっていきました。
本当はFirebaseを使うところも載せたかったのですが、長くなったので一旦ここまでとします。
次回は、実際に「Firebaseを使った匿名認証」をやっていますので興味がある方はぜひ参考にしてみてください。
また、今回Flutterを勉強するにあたり利用した教材をあげています。
主に本とUdemyの動画教材を利用しています。興味ある方は、本やUdemyを購入して勉強してみることをおすすめします。
学習に使った本はこちら!
Amazon Kindle Unlimited でもFlutter、Dartの本はいっぱいあるぞ!