【Flutter】Firebaseの導入方法をまとめておく【スクショあり】

どーも、ぐるたか@guru_takaです。

公式が紹介しているFirebase for Flutter codelabの流れに沿って、Firebaseを導入する方法をまとめていきます!

Flutterの環境構築や”Hello World”する方法はこちらを参考にしてみてください。
【Mac】Flutterの環境構築をまとめてみる 【Flutter】VSCodeでHello Worldしてみる方法【画像あり】

主な流れ

STEP.1
dependenciesの更新
STEP.2
Firebaseのプロジェクト作成
STEP.3
iOS, Androidのプラットフォーム特有の設定
STEP.4
Cloud Firestore DBの作成
STEP.5
コードをコピペして、デバック

STEP1:dependenciesの更新

pubspec.yamlを編集します。

pubspec.yaml
dependencies:
  cloud_firestore: ^0.12.9+4
コマンドライン
$ flutter pub get

STEP2:Firebaseのプロジェクト作成

Firebaseのサイトにアクセスし、プロジェクトを追加します。
Firebase コンソール | 公式

STEP3:iOS, Androidのプラットフォーム特有の設定

iOSの設定

まずはiOSの設定から説明していきます。

iOSバンドルIDを記入して、GoogleService-Info.plistをダウンロードします。

あとは「次へ」を押し、進めちゃって大丈夫です!

次にプロジェクト名/Runner/ios/Runner.xcodeprojをxcodeで開いて、Runnerのディレクトリ配下へGoogleService-Info.plistをドラッグ&ドロップ。その後、BUNDLE_IDを記入したものに変更しましょう。

あとはIdentity関係を修正すれば完了です!

Androidの設定

続いて、Androidの設定から説明していきます。

Androidパッケージ名を記入し、アプリを登録します。

そして、google-services.jsonをダウンロード。プロジェクト名/android/appのディレクトリ配下に入れます。

注意
clientのpackage_nameが間違っていると、エラーがでるので気をつけてください!


次にFirebse SDKを追加します。

プロジェクト名/android/build.gradle
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.2'
  }
プロジェクト名/android/app/build.gradle
apply plugin: 'com.android.application'

android {
  // ...
}

dependencies {
 // ...
 implementation 'com.google.firebase:firebase-firestore:18.2.0'
}

// 追加
apply plugin: 'com.google.gms.google-services'

Androidはこれで準備完了です!

STEP.4:Cloud Firestore DBの作成

Cloud Firestore DBの作成します。

今回はあくまでセットアップすることだけが目的なので、ルールはテストモードでOKです!もし、リリースする際は危険なのので、各自セキュリティルールをチェックしてください。

あとは、DB構造を公式の画像の通り、設定しましょう。


引用:Firebase for Flutter | 公式

Cloud Firestore DBを使用する場合、デバックでエラーが出ます。公式のissueに解決方法があるので、先にやっちゃいます。プロジェクト名/android/app/build.gradleに以下追記すればOKです!

プロジェクト名/android/app/build.gradle
...
android {
  ...
  defaultConfig {
    ...
    multiDexEnabled true
  }
  ...
}
...
dependencies {
  implementation 'com.android.support:multidex:1.0.3' // use latest version
  ...
}
...
参考 Issue with cloud_firestore - Cannot fit requested classes in a single dex fileGithub

STEP.5:コードをコピペして、デバック

あとは公式のソースをコピペ。デバックすれば、無事終了です。こんな風にタップすると、DBの数字と画面の数字が連動するのが確認できます!

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Baby Names',
     home: MyHomePage(),
   );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() {
   return _MyHomePageState();
 }
}

class _MyHomePageState extends State {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('Baby Name Votes')),
     body: _buildBody(context),
   );
 }

 Widget _buildBody(BuildContext context) {
   return StreamBuilder(
     stream: Firestore.instance.collection('baby').snapshots(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) return LinearProgressIndicator();

       return _buildList(context, snapshot.data.documents);
     },
   );
 }

 Widget _buildList(BuildContext context, List snapshot) {
   return ListView(
     padding: const EdgeInsets.only(top: 20.0),
     children: snapshot.map((data) => _buildListItem(context, data)).toList(),
   );
 }

 Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
   final record = Record.fromSnapshot(data);

   return Padding(
     key: ValueKey(record.name),
     padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
     child: Container(
       decoration: BoxDecoration(
         border: Border.all(color: Colors.grey),
         borderRadius: BorderRadius.circular(5.0),
       ),
       child: ListTile(
         title: Text(record.name),
         trailing: Text(record.votes.toString()),
         onTap: () => Firestore.instance.runTransaction((transaction) async {
               final freshSnapshot = await transaction.get(record.reference);
               final fresh = Record.fromSnapshot(freshSnapshot);

               await transaction
                   .update(record.reference, {'votes': fresh.votes + 1});
             }),
       ),
     ),
   );
 }
}

class Record {
 final String name;
 final int votes;
 final DocumentReference reference;

 Record.fromMap(Map map, {this.reference})
     : assert(map['name'] != null),
       assert(map['votes'] != null),
       name = map['name'],
       votes = map['votes'];

 Record.fromSnapshot(DocumentSnapshot snapshot)
     : this.fromMap(snapshot.data, reference: snapshot.reference);

 @override
 String toString() => "Record<$name:$votes>";
}

参考文献

参考 Flutter アプリに Firebase を追加する公式 | Firebase 参考 Firebase for Fluttercodelabs

コメントを残す