Flutterを用いた飲食店レビューアプリの製作日記〜8日目〜

yukyu

前回まで

ロゴを作成
開発環境を構築
ログイン認証ページを作成
スプラッシュ画面を作成
レビュー投稿画面，お店登録画面を作成
お店の情報とレビューを見ることのできる画面を作成
マップを表示する
地図を長押しでレストラン投稿画面に遷移するようにした
位置情報をFirestoreに保存した

８日目

前回までマップを長押しして，長押した点の座標を取得することまでできたので，長押しした地点にマーカーを設置できるように改良をしていきます．

公式のリポジトリにマーカーを設置しするプログラムがあるのでその中のplace_marker.dartの_add関数を参考にしました．

以下のコードを記述しました． 

onLongPress: (LatLng pos) {
         longPress = pos;
         setState(() {
           _put(longPress);
         });
         }, ​
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

 void _put(LatLng location) {
   final MarkerId markerId = MarkerId('put');
     final Marker marker = Marker(
       markerId: markerId,
       position: location,
       infoWindow: InfoWindow(title: 'お店を登録しますか?', snippet: ''),
     );
   setState(() {
     markers[markerId] = marker;
   });
 }

マップ上を長押しすることで，長押しした座標を_put関数に渡し，_put関数でマーカーを追加します．

長押しした後に，登録するかどうかを選択するためにモーダルボトムシートを使用しました．以下のサイトを参考にさせて頂きました．

ここまでを実際に動かしてみた風景です．

位置情報に関してはデータベースに登録してあり，マーカーを設置するための準備も今回できているので，データベースから取得してマーカー設置はできそうですね．

ここまで

ロゴを作成
開発環境を構築
ログイン認証ページを作成
スプラッシュ画面を作成
レビュー投稿画面，お店登録画面を作成
お店の情報とレビューを見ることのできる画面を作成
マップを表示する
地図を長押しでレストラン投稿画面に遷移するようにした
位置情報をFirestoreに保存した
(今回できたこと)Googlemapを長押しでマーカーを配置，モーダルボトムシートを表示

感想

アプリの設計はしたものの，Flutterのいろいろな機能を使おうとして変わってしまいました．なので，改めてここまで画面遷移とかの設計やUIをちゃんと把握するためにまとめたいと思います．あと，このアプリは友人に使ってもらうために作っているので現段階だと公開する予定はありません．