やってみた04 Flutter マッチングアプリ開発 画面編 その2

概要

今回はホーム画面周りのデザインを載せていく

bottomnavigationbar

ログイン後はホーム画面へ遷移する。
bottomnavigationbarの構成はこんな感じ

1. ホーム画面
2. チャット一覧画面
3. 通知一覧画面
4. プロフィール画面
5. マッチング投稿画面

ホーム画面

ここは投稿一覧が投稿日順で表示される。

構成はこんな感じ

1. 投稿
2. 検索ウィジェット

投稿

投稿をタップすると詳細情報が表示され、参加したい投稿に参加依頼を投げることができる。

右上に投稿者だけに編集アイコンボタンが表示され、タップすると投稿修正ダイアログが表示され、修正することができる。

検索ウィジェット

ここで条件を絞ったり、キーワードで検索をかけたりもできるようにする。

チャット一覧画面

構成はこんな感じ

1. 投稿一覧
2. ユーザー一覧
3. チャット一覧
4. テキストフィールド

ユーザー一覧では、参加しているユーザーと参加依頼が来ているユーザーが一覧として表示され、
主催者が参加・不参加を判定できる。そのユーザーの詳細も確認できる。
参加者は退出を判定できる。
ちなみに今回は個人チャットは設けない。

本日はここまで。
次回は残りのbottomnavigationbarについて記載していく。