技術記事

micomia株式会社の畑井です。
今回はある画面でリスト表示されている投稿などをタップして詳細が見れるような機能についてどうやって作るのか解説していきます。
今回お題として扱うのはユーザーの一覧表示と詳細表示画面となります。

1.ページを2枚作る

画像で表示しているプロジェクトではフォルダが複数ありますが、今回利用するのは「SampleList」と「SampleListDetail」の2つだけとなります。

2.Widgetを配置する

AppBarを削除して、Columnの中にListViewを入れ、ListViewの中にContainerを入れ、Containerの中にTextを入れています。

ListViewにAdd Queryで表示するデータを選択します。
今回はデータを次のページに渡すことだけを伝えることができれば問題ないのでどこのプロジェクトでも大抵定義されているusersコレクションを利用します。

usersコレクションをまだ定義していない方は下記の画像を参考に入力してみてください。

下記のような画面が表示されますが、Confirmで大丈夫です。

下の画像が完成状態です。

ListViewから取得してくる情報を画面に表示させてあげましょう。
今回はusers Documentのdisplay_nameで名前を表示させてあげるでいいと思います。

3.画面遷移を実装する

ContainerをクリックしてActionsからNavigate ToのSampleListDetailをクリックして上の画像のような状態にしましょう。

次に上の画像の画面右下にあるParametersというところの「＋Define」をクリックします。
ここではパラメーターとして画面を移動する際に何のデータを一緒に持っていくかを決めていきます。

今回はListViewにあるDocument Referenceを次のページに持って行ってあげるとそのページでDocument Referenceを読み込んでドキュメント情報を取得できるので画像のように定義してConfirmを押しました。

Passという緑に光るボタンが現れますのでクリックしてListViewにあるDocument Referenceをセットしてあげます。
下の画像のようにセットしてみてください。

次の設定をするために移動先のSampleListDetailに移動します。

4.移動先のページでデータを受け取ろう

SampleListDetailのWidget Treeの一番上にあるWidgetをクリックして、Add QueryからDocument from ReferenceでPage ParametersにあるuserRefをセットしてあげます。画面遷移の時にセットしたParameterはPage Parameterという名前で遷移先の画面に現れます。

このページにDocument from ReferenceでセットしたのでText Widgetを置いてみるとデータが取れるようになっていることが確認できると思います。
複数のText Widgetを置くことで詳細情報を表示する画面を作ることができると思います。