はじめに

Flutter初心者が公式のサンプルを見ながら動きを勉強していく記事です。
細かいコードの解説をするのではなく、詰まった点のメモや解決方法の記事のリンクなどをまとめて載せていきます。
この記事を読むと、以下のアプリが完成します。

flutterアプリケーションをfirebaseに接続
Cloud Firestoreからデータを取得
データをgoogle map上のmarkerに変換
marker情報を表示するカルーセルを設置
カルーセルタップで該当のピンの位置を画面の中心に移動

完成形のコード。

mapの実装

開発環境の構築

開発環境の設定は、以下の記事ですでに行なっている。

プロジェクトの作成

AndroidStudioを開き、新規Flutterプロジェクトを作成する。
作りたてのアプリを起動すると、以下のようなものができている。
すでに動くアプリが作れてるのすごいな。

google map apiの利用

以下の2つの記事を参考に、google map apiの登録からアプリへのmap表示までを行う。
基本は一つ目の記事でいいんだけど、日本語ではないから二つ目の記事と合わせて読むとより理解が深まるかも。

上記の記事に従って進めたところ、

Cannot resolve symbol 'Properties'
Cannot resolve symbol 'GradleException'

といったエラーが発生した。このエラーを調べると、以下の記事の対応を行うと解消されることがわかった。

こうして、Flutterの公式のpackageのサンプルコードを実装した。
とりあえずgoogle mapをアプリに組み込むことに成功！

ファイルの分割

一つのファイルに全部書くと管理が大変なので、以下のようにファイルを分けた。

lib
- widgets : main以外のwidgetを記述したファイルを入れておくもの
  - counter_demo.dart : 既存のデモアプリのwidgetを記述
  - map_demo.dart : 新たに作成したmapのデモアプリのwidgetを記述
- main.dart

別ファイルのwidgetを読み込む方法は、以下の記事を参考にした。

mapの見た目を変える

上記画像の問題点が2点。

google mapの見た目が衛生写真であること。
ホームボタンと現在地ボタンが重なってしまっていること。

両方とも、以下の記事の動画の中で解説されていたのでそれを参考にコードを修正する。

動画を見直すのはだるいので、変更部分のコードのみ記録しておく。

map_demo.dart

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.normal, //←変更
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,　//← 追記
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );

これでなんかそれっぽくなってきた！！

サンプルアプリの実装

google_mapを表示する際に必要なコードがわかった。
次は実際にサンプルのアプリのコードを少しずつ移植していき、自分のアプリに組み込んで行ってみる。

Cloud Firestoreの設定

以下の記事を参考に、cloud fire storeを使えるようにする。

新たなFirebaseプロジェクトの作成
作成したプロジェクト内でCloud Firestoreの利用を開始

Cloud Firestoreへデータ登録

利用開始したCloud Firestoreに対して、以下の形式のデータを登録する。
Cloud Firestoreを利用したことがないのであっているかわからないが、とりあえずこれで進めてみる。

Cloud Firestoreパッケージの導入

flutterでCloud Firestoreを利用できるように、pubspec.yamlファイルにcloud_firestoreの追加を行う。

ちなみに、null-safetyのやつが混じっているとかなんとか色々エラーが出たので、以下の対応を行なった。

cloud_firestoreを2021年9月時点での最新版である2.5.2をインストールするように修正
/ios/Podfileにて、使用するiOSのバージョンを11以上とするように修正

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

pod repo updateの実行

コードの記述

実際にflutterでCloud Firestoreにアクセスし、取得した位置情報をgoogle map上に表示するアプリを作成する。
/lib/widgets/配下に、firestore_demo.dartを作成して、そこに必要なコードを追加していく。
今回はサンプルのほぼコピペでいく。

Cloud Firestoreのflutter用のパッケージの利用説明なんかは以下のページにあるから、これを読むと何してるか理解しやすいかも。

targetをiOS9以降に設定

ターゲットがサポートされていない旨のエラーが出た。

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.5.99. (in target 'gRPC-Core' from project 'Pods')

解決方法

FlutterアプリにFirebaseを組み込む

GoogleSearvice-Info.plistを設置しろというエラーが出た。
確かに、firebaseをflutterから使うための設定を何もしていなかった。

[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: [core/not-initialized] Firebase has not been correctly initialized. Have you added the "GoogleService-Info.plist" file to the project?

以下の記事に従って、設定を行なっていくことで解消された。

ちなみにFirebase公式が出している記事は以下。

完成品の挙動

(qiitaに載せるためにgifの枚数をめっちゃ少なくしたので、すごい見にくくなってしまっている...)

今後の展望

自分のサーバから取得したデータで同じ処理をできるようにする。
ショップリストページを作成し、ボタンタップで二つのページを行き来できるようにする。

参考

公式のgithubのサンプルアプリ