目次
概要
今回のブログポストではFlutterでfirebase_core
を使ってFirebase
を連動するつ方法について説明します。
ブログシリーズ
このブログはシリーズで作成されております。次のリンクを使って他のブログポストは下記のリンクで確認できます。
- [Flutter] Firebase Core
- [Flutter] Firebase Analytics
- [Flutter] Firebase Crashlytics
Firebaseプロジェクト生成
次はグーグルファイアベース(Google Firebase)でプロジェクトを生成する必要があります。下記のリンクを押してグーグルファイアベース(Google Firebase)へ移動します。
- グーグルファイアベース(Google Firebase): https://firebase.google.com
右上のSIGN IN
ボタンを押してログインします。
ログインしたら、右上のGO TO CONSOLE
ボタンを押してグーグルファイアベースコンソール(Google Firebase Console)へ移動します。
グーグルファイアベースコンソール(Google Firebase Console)で+ Add project
を押してプロジェクトを追加します。
上のような画面でEnter your project name
へ作りたいFirebaseプロジェクトの名前を入力します。入力が終わったら、下記にあるContinue
ボタンを押して次へ進めます。
プロジェクト名を入力したら、上のようにGoogle Analytics
を連動する画面が表示されます。Google Analyticsと連動したくない場合、左下にあるボタンを押してDisable
で変更してFirebaseプロジェクトを生成します。
Google Analyticsと連動したい方はContinue
を押して進めます。
Google Analyticsのアカウントを選択して、Create project
ボタンを押してFirebaseプロジェクトを生成します。
iOS設定
firebase_core
を使ってFlutterでFirebaseを使うためiOSを設定する方法について説明します。
Bundle identifier変更
FirebaseでiOSプロジェクトを生成する前、iOSのBundle identifier
を変更する必要があります。ios/Runner.xcworkspace
ファイルを実行してXcodeを実行します。
左上のプロジェクト名を選択してGeneral
タブに移動すると、上にあるBundle Identifier
を確認することができます。このBundle IDを自分のプロジェクトに合わせて変更します。
Firbase iOSプロジェクト設定
グーグルファイアベースコンソール(Google Firebase Console)でプロジェクトを選択すると次のような画面が見えます。
真ん中へiOS
ボタンを押してiOSの設定画面へ移動します。
開発したアプリのID(bundle ID)を入力してRegister app
ボタンを選択します。
グーグルファイアベース(Google Firebase)が生成したGoogleService-Info.plist
ファイルをダウンロードしてXcodeを使ってRunner/Runner
フォルダへドラッグして当該ファイルを追加します。GoogleService-Info.plist
ファイルを追加したら、Next
ボタンを押します。
この画面が表示されたら、Next
ボタンをクリックして次の画面に移動します。
上のような画面でもNext
ボタンをクリックして次の画面へ移動します。
私はこの部分でSkip this step
を押してスキップしました。
アンドロイド設定
firebase_core
を使ってFlutterでFirebaseを使うためアンドロイドを設定する方法について説明します。
Gradle修正
FlutterでFirebaseを使うためにはGradle
ファイルを修正する必要があります。まず、android/app/build.gradle
ファイルを開いて下記のような内容を追加します。
...
apply plugin: 'com.google.gms.google-services' // <<<<<<<<<<<<< Add this
android {
...
}
そしてapplicationId
を当該プロジェクトに合わせて修正します。
// applicationId "com.example.blaboo_app"
applicationId "io.github.dev.yakuza.blaboo"
その後、android/build.gradle
ファイルを開いて下記のように修正します。
buildscript {
...
dependencies {
...
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:4.3.14' // <<<<<<<<<<<<<<<< Add this
}
}
これでアンドロイドでFirebaseを使う準備ができました。
Firbaseのアンドロイドプロジェクト設定
グーグルファイアベースコンソール(Google Firebase Console)で左上のProject Overview
を選択します。
상단에 + Add app
> 안드로이드(Android) 아이콘
을 눌러 안드로이드(Android) 프로젝트 설정으로 이동합니다.
上にある+ Add app
> アンドロイド(Android)アイコン
を押してアンドロイド(Android)プロジェクトの設定へ移動します。
グーグルファイアベース(Google Firebase)が作ったgoogle-services.json
ファイルをFlutterプロジェクトのandroid/app
フォルダへコピーします。そしてNext
ボタンを押して次へ進めます。
firebase_coreインストール
FlutterでFirebaseを使うためには、firebase_core
パッケージをインストールする必要があります。次のコマンドを実行してfirebase_core
をインストールします。
flutter pub add firebase_core
iOSのインストール
iOSでfirebase_core
を使うためには./ios/Podfile
を修正して、必要なライブラリをインストールする必要があります。firebase_core
はiOSのバージョン11を要求してるので、./ios/Podfile
ファイルを開いて下記のように修正します。
# Uncomment this line to define a global platform for your project
platform :ios, '11.0'
...
そして下記のコマンドを実行して必要なライブラリをインストールします。
# cd ios
pod install
Firebase初期化
このようにfirebase_core
パッケージをインストールしたら、次は当該パッケージを使ってFirebaseを初期化する必要があります。main.dart
ファイルを開いて下記のように修正してFirebaseを初期化します。
import 'package:firebase_core/firebase_core.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
完了
これでFlutterでFirebaseを使うためFlutterプロジェクトとFirebaseプロジェクトを準備して、firebase_core
を設定する方法についてみてみました。次はFirebaseの他の機能を使うため、他のブログポストも確認してみてください。
私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!
アプリ広報
Deku
が開発したアプリを使ってみてください。Deku
が開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。