FlutterでGoogleMapを使ったアプリを作ってみる

どんなアプリか？

• 西中島南方駅周辺のキャッシュレス対応のお店情報を表示するアプリ
• ピンをタップでお店情報を表示 & スライド変更でお店のピンへ移動

‎「ポイント還元対象店舗検索アプリ」 が既にあるのですが、Flutterの勉強がてら作ってみました。

リポジトリ: https://github.com/matometaru/my_app

API

キャッシュレス・消費者還元事業のAPIを使わさせていただきました。

出典：キャッシュレス・消費者還元事業（ https://cashless.go.jp/terms_of_use.html ）

使用したライブラリ

• google_maps_flutter | Flutter Package
• location | Flutter Package
• carousel_slider | Flutter Package
• http | Dart Package

苦労した点

AndroidとiOSの差異

AndoridにあるInfo WindowがiOSにはありませんでした。
GitHub - Solido/awesome-flutter から代用できそうなライブラリを探したところflutter_carousel_sliderで代用できました。

非同期処理

carousel_sliderのanimateToPageが非同期処理なのでスライド時にgoogleMapのカメラとの同期がうまくいかず、jumpToPageに変更するとうまく行きました。

xxx.dart

basicSlider.jumpToPage(pageIndex);
// basicSlider.animateToPage(
//   pageIndex,
//   duration: Duration(milliseconds: 300),
//   curve: Curves.linear
// );

レイアウトの調整

以下のような簡単なレイアウト実装に対するコード量が多い。
なかなか思い通りのレイアウトが再現できずもどかしかったです。

xxx.dart

child: Column(
  children: [
    Container(
      alignment: Alignment.centerLeft,
      child: Text(
        "${store.name}",
        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)
      ),
    ),
    Container(
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
      alignment: Alignment.centerLeft,
      child: Text(
        'ID: ${store.id}',
        style: TextStyle(fontSize: 16.0)
      ),
    ),
    Container(
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
      alignment: Alignment.centerLeft,
      child: Text(
        "Tel: ${store.tel}",
        style: TextStyle(fontSize: 16.0)
      ),
    ),
  ],
),

flutterstudioを使いこなすと、レイアウト周りはかなり楽になるかもしれません。

今後追加したい機能

• 現在地周りの店舗情報を取得
• 店舗のキャッシュレス対応アプリの掲載
• Push通知

以上です。