FlutterでFirestoreと連携したAndroidアプリを作る

こんにちは、Tamappeです。

本日はFlutterでFirestoreと連携したAndroidアプリを作る方法について解説していきます。

開発環境
Firebaseプロジェクトの設定
Flutterでの設定
参考文献

開発環境

Android Studio	4.0
Flutter	1.22.3
Dart	2.10.3
Firestore	0.9.5

$ flutter --version
Flutter 1.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8874f21e79 (10 days ago) • 2020-10-29 14:14:35 -0700
Engine • revision a1440ca392
Tools • Dart 2.10.3

このような構成になっています。

Firebaseプロジェクトの設定

まずはFirebaseのプロジェクトの作成と個別の設定をしていきます。

プロジェクト名は「test-app」とでもしましょう。「続行」ボタンをクリックします。次のページに進みます。

Analyticsの設定ですが、今回は必要ありませんので外します。

これでプロジェクトが作成されます。

今回はAndroidアプリの連携ですので、Androidアプリを追加します。

ここで一旦Flutterのプロジェクトファイルに戻ります。

Flutterの編集

Flutterのプロジェクト名を「test_app」にしてプロジェクトファイルを作成します。

次のページの「Package name」をメモしておきます。これをFlutterのアプリ名のところに入力します。

すでにプロジェクトを作成している場合

すでにプロジェクトを作成してしまっている場合はパッケージ名をどこかから見つけてくる必要があります。

パッケージ名は「app/src/main/AndroidManifest.xml」ファイルを開いたら書いてあります。

Firebaseの設定に戻ります。

Firebaseのアプリの追加ページの「Android パッケージ名」にさきほどメモした「パッケージ名」を入力します。その他の「アプリのニックネーム」などは空欄でも大丈夫です。

android/app直下にgoogle-services.jsonを追加

次のページでは「google-services.json」ファイルをダウンロードしてAndroidのプロジェクトの「android/app」直下にインポートします。

こんな感じです。

FirebaseのSDKの追加

次にFirebaseを使うためにSDKのインポート作業をしていきます。

android/build.gradleを編集します。

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }

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

allprojects {
    repositories {
        google()
        jcenter()
    }
}

次にandroid/app/gradleの編集を編集します。

設定が終わったらFirebaseに戻って「コンソールに戻る」をクリックします。

これで基本的な設定が完了します。

Firestoreのデータベースを作成する

FirebaseでAndroidアプリを作成しましたので、早速Firestoreのデータベースを作成します。

左のメニューから「Cloud Firestore」を選択して「データベースの作成」をクリックします。

データベースの作成では「テストモードで開始する」を選択して「次へ」をクリックします。

次のロケーションの選択では「asia-northeast1」を選択します。選択後に「有効にする」をクリックするとデータベースが作成されます。ちなみにここで選択した「ロケーション」はあとで変更することができませんので注意して選択してください。

これでFirestoreのデータベースの設定が全て完了します。

テストデータを作成する

では試しにテストデータを作成してみます。

コレクションに「todos」を作成してなんか「title」のパラメータを設定して「サンプルテスト」などの文字列を作成します。

「コレクションを開始」ボタンをクリックします。

次のように入力して「次へ」ボタンをクリックします。

次のサンプルデータは解説が大変なので↓の画像の通りに設定してくれたらサンプルデータが出来上がります。

このようにデータが作成されていたらOKです。

サンプルデータが出来上がっています。

multiDexEnabledの対応

私の環境だとこれを設定していないとメソッド数が 65536 を超えるとビルドできないというのでビルドに失敗しました。おそらくFirebaseのライブラリを導入したことでエラーになってしまうのだと思います。

そのため、android/app/build.gradleを開いてmultiDexEnabledの対応を施します。

defaultConfig {
        applicationId "xxx.test_app"
        minSdkVersion 16
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        // これを追加する
        multiDexEnabled true
    }

これで設定が完了します。

Flutterでの設定

それではFlutterの実装を開始していきます。

「pubspec.yaml」の編集として「firebase_core」と「cloud_firestore」をインポートします。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  firebase_core: ^0.3.0
  cloud_firestore: ^0.9.5

ターミナルで「flutter pub get」を叩きます。

flutter pub get

ここからやっと開発に進みます。

「lib/main.dart」で次のコードを入れてFirestoreを使える状態にします。

import 'package:cloud_firestore/cloud_firestore.dart';

さきほどサンプルデータを作成しましたので、アプリ起動時にそのtitleを取得して表示させるところまでを実装します。

main.dartにコードを書いていきます。

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

var db = Firestore.instance;

void main() {
  runApp(MyHomePage());
}

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firestore Test'),
        ),
        body: createListView(),
      ),
    );
  }

  createListView() {
    return StreamBuilder(
      stream: db.collection('todos').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        // エラーが発生
        if (snapshot.hasError) {
          return Text('エラーが発生');
        }

        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Text('読込中');
          default:
            var firstData = snapshot.data.documents[0];
            var title = firstData.data['title'];
            return Text('$title');
        }
      },
    );
  }
}

これでアプリを起動するとさきほどのサンプルデータが表示されていればOKです。