[Flutter] Firebase core

2021-05-16 hit count image

今回ブログポストではFlutterでFirebaseを連動する方法について説明します。

概要

今回のブログポストではFlutterでfirebase_coreを使ってFirebaseを連動するつ方法について説明します。

ブログシリーズ

このブログはシリーズで作成されております。次のリンクを使って他のブログポストは下記のリンクで確認できます。

Firebaseプロジェクト生成

次はグーグルファイアベース(Google Firebase)でプロジェクトを生成する必要があります。下記のリンクを押してグーグルファイアベース(Google Firebase)へ移動します。

google firebase

右上のSIGN INボタンを押してログインします。

google firebase after login

ログインしたら、右上のGO TO CONSOLEボタンを押してグーグルファイアベースコンソール(Google Firebase Console)へ移動します。

google firebase console

グーグルファイアベースコンソール(Google Firebase Console)で+ Add projectを押してプロジェクトを追加します。

google firebase console add project

上のような画面でEnter your project nameへ作りたいFirebaseプロジェクトの名前を入力します。入力が終わったら、下記にあるContinueボタンを押して次へ進めます。

google firebase console add google analytics

プロジェクト名を入力したら、上のようにGoogle Analyticsを連動する画面が表示されます。Google Analyticsと連動したくない場合、左下にあるボタンを押してDisableで変更してFirebaseプロジェクトを生成します。

Google Analyticsと連動したい方はContinueを押して進めます。

google firebase console add integrate google analytics

Google Analyticsのアカウントを選択して、Create projectボタンを押してFirebaseプロジェクトを生成します。

iOS設定

firebase_coreを使ってFlutterでFirebaseを使うためiOSを設定する方法について説明します。

Bundle identifier変更

FirebaseでiOSプロジェクトを生成する前、iOSのBundle identifierを変更する必要があります。ios/Runner.xcworkspaceファイルを実行してXcodeを実行します。

change ios bundle id

左上のプロジェクト名を選択してGeneralタブに移動すると、上にあるBundle Identifierを確認することができます。このBundle IDを自分のプロジェクトに合わせて変更します。

ターゲットSDKバージョン変更

firebase_coreのパッケージを使うためにはiOSのターゲットSDKのバージョンを変更する必要があります。ios/Podfileファイルを開いて下記のように修正します。

# Uncomment this line to define a global platform for your project
platform :ios, '10.0'

Firbase iOSプロジェクト設定

グーグルファイアベースコンソール(Google Firebase Console)でプロジェクトを選択すると次のような画面が見えます。

google firebase console project

真ん中へiOSボタンを押してiOSの設定画面へ移動します。

google firebase console project ios

開発したアプリのID(bundle ID)を入力してRegister appボタンを選択します。

GoogleService-Info.plist download

グーグルファイアベース(Google Firebase)が生成したGoogleService-Info.plistファイルをダウンロードしてXcodeを使ってRunner/Runnerフォルダへドラッグして当該ファイルを追加します。GoogleService-Info.plistファイルを追加したら、Nextボタンを押します。

add Firebase SDK

이 화면이 표시되면, Next 버튼을 클릭하여 다음 화면으로 이동합니다.

edit appdelegate.m for firebase

上のような画面でもNextボタンをクリックして次の画面へ移動します。

connect firebase to app

私はこの部分でSkip this stepを押してスキップしました。

アンドロイド設定

firebase_coreを使ってFlutterでFirebaseを使うためアンドロイドを設定する方法について説明します。

Gradle修正

FlutterでFirebaseを使うためにはGradleファイルを修正する必要があります。まず、android/app/build.gradleファイルを開いてファイルの下へ下記のような内容を追加します。

...
apply plugin: 'com.google.gms.google-services' // <<<<<<<<<<<<< Add this

そして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.5' // <<<<<<<<<<<<<<<< Add this
    }
}

これでアンドロイドでFirebaseを使う準備ができました。

Firbaseのアンドロイドプロジェクト設定

グーグルファイアベースコンソール(Google Firebase Console)で左上のProject Overviewを選択します。

Google Firebase Console Project Overview

상단에 + Add app > 안드로이드(Android) 아이콘을 눌러 안드로이드(Android) 프로젝트 설정으로 이동합니다.

Google Firebase Android app register

上にある+ Add app > アンドロイド(Android)アイコンを押してアンドロイド(Android)プロジェクトの設定へ移動します。

Google Firebase google-services.json setting

グーグルファイアベース(Google Firebase)が作ったgoogle-services.jsonファイルをFlutterプロジェクトのandroid/appフォルダへコピーします。そしてNextボタンを押して次へ進めます。

Google Firebase setting on android

firebase_coreインストール

FlutterでFirebaseを使うためには、firebase_coreパッケージをインストールする必要があります。次のコマンドを実行してfirebase_coreをインストールします。

flutter pub pub add firebase_core

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の他の機能を使うため、他のブログポストも確認してみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts