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

2020年10月21日 01:59

前回まで

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

９日目

データベースから，登録された座標を取得しその位置にマーカーを設置する機能の実装をおこなっていました．

自分が躓いたところが，座標はLatLngクラスで取得し，Firestoreに保存する際にはGeoPointクラスに変換しています．それを忘れており，Firestoreから取得した座標をLatLngクラスとして処理するプログラムを書いていました．ずっとほかのコードが間違っていると修正を繰り返し，2時間後くらいにそのことに気がつきました．そんなこんなで以下のよ実装できました．(Firstoreからのドキュメント取得などは省略してあります)

GeoPoint pos = doc['location'];//DBから位置情報を取得し
       Marker marker = Marker(
         markerId: MarkerId(doc.id),
         position: LatLng(pos.latitude, pos.longitude),GeopointからLatLngに変換
         infoWindow: InfoWindow(title: doc['name'], snippet: doc['category']),
       );

実際に動かしたものがこちらになります.

本日の成果 pic.twitter.com/fKz1Tb7w68
— yukyu@vket5出店 (@yukyu30) October 20, 2020

UIとか少し変えました．ホームページとお店を登録するページで地図を二回読み込むのはどうにかならないものか...

ここまで

感想

やっとマップにマーカーを表示することができたました．
マーカーをタップして別ページに遷移したりする機能がgoogle_maps_flutterでは未実装みたいなので，お店の情報やレビューを見せるための方法をかんがえないといけませんね...

このようなUIに変えようかなと思っています.
理解が中途半端な状態なのでFlutterをもっと理解していきたいですね