📘
初めての個人アプリ開発日記：口コミアプリ【投稿画面編】
初めての個人アプリ開発日記：口コミアプリ【投稿画面編】
前回は「ぐるめも」のホーム画面についてまとめました。
今回は、実際に口コミを投稿する「投稿画面」のUIをどのように構築したかをご紹介します。
✏ 投稿画面で実現したい要素
投稿画面では、簡単でストレスなく使える投稿体験を目指しています。以下の要素を実装しました：
- 店名（地図画面から選択）
- コメント（複数行テキスト）
- カテゴリ選択（ドロップダウン）
- 評価（星マークによる選択）
- 投稿画像（1枚、ギャラリーから選択）
- 閉店可否（トグル）
- 投稿者名・投稿日時（裏で自動付与）
- 投稿ボタン（バリデーション付き）
📱 UIイメージ
「ぐるめも」では、なるべく入力しやすく、シンプルでわかりやすい投稿フォームを目指しています。
現時点の投稿画面はこんな感じです：
)
※画像は開発中のものです
フォーム全体をカード風にし、入力エリアに適度な余白と影をつけることで、柔らかい印象を演出しています。
🔧 コードでの実装ポイント（一部）
Flutterの基本ウィジェットを活用し、実装コストを抑えつつ柔軟なUIを構築しました。
-
TextFieldとDropdownButtonFormFieldで入力UIを作成 -
ImagePickerで端末のギャラリーから1枚画像を選択 - 評価はカスタムウィジェットで星マークを並べてタップ入力に対応
- 投稿時は Firestore に送信し、投稿者・日時はサーバー側で記録
- UI全体に角丸・影・余白をつけて「投稿カード」らしい雰囲気を演出
✨ 今後の拡張予定
- 投稿画像を最大4枚まで添付できる機能（有料プラン想定）
- Cloudflare Imagesへの切り替えで、Storageコストの月額固定化を検討中
- 店舗カテゴリの自動推定（Google Maps連携）＋手動編集機能も追加予定
💬 投稿画面を作って感じたこと
口コミアプリでは、**「記録を残したくなる雰囲気」と「入力のしやすさ」**が特に重要だと感じました。
Flutterのおかげで、柔らかく優しい印象のUIをスムーズに構築できています。
StatefulWidgetをベースにしていますが、今後は状態管理の見直し（Riverpodなど）も検討中です。
🚧 次回予告
次回は、地図画面の構築とGoogle Maps SDKとの連携について紹介する予定です！
🙌 おわりに
この記事では「ぐるめも」の投稿画面のUI実装についてまとめました。
Flutter × Firebase でアプリ開発をしている方や、個人開発の進め方に興味がある方にとって、少しでも参考になれば嬉しいです！
引き続きZennで開発日記を連載していきます。フォローやいいねで応援いただけると励みになります！
Discussion