FlutterFlowを用いた画像一覧から詳細画面への遷移の実装方法

本記事では、FlutterFlowを使用してスマホアプリ内で画像一覧から特定の画像をタップした際に詳細画面を表示する機能の実装方法について説明します。特に、FirebaseのSubcollectionを利用せずにデータを扱う方法に焦点を当てています。この情報は、インターネット上ではあまり見かけないため、ここに詳しくまとめました。

概要

ユーザーがアプリ内の画像一覧から画像を選択すると、その画像に関連する詳細情報が表示される機能について解説します。データベースからSubcollectionのリスト形式でデータを取り込み、選択された画像に応じて詳細画面に遷移します。

FlutterFlowの使用経験は1ヶ月程度ですので、誤りがある場合は指摘をお願いします。

実例

アプリケーションの事例

本アプリケーションでは、聖地巡礼の作品が一覧で表示されており、ユーザーが作品を選択すると、その作品の関連する場所が複数表示されます。以下は、その動作を示すGIFです。

データベース構造

データベースは次のような構造をイメージしています。

作品のメイン写真
- 各作品の場所とその場所の写真
- 各作品の場所とその場所の写真

実装方法

記事の本文では、具体的な実装手順やコードスニペットを提供し、読者がこの機能を自分のプロジェクトに組み込めるようにします。

Pageを追加します。

適当なものを選びます。今回はList13を選びました。

扱いにくいので編集します。
List View以下をコピーします。

Tabを消してListViewをペーストします。

Locationページを追加しました。
GoogleMapを追加しています。

データベース作成

productionテーブルを作成します。

同様にlocationテーブルを作成します。

FlutterFlowはこうやって半自動でデータベースをつくれるのがいいですね。
課金するとAIを使ってデータベースを作成できます。

Location

Production

仮のデータを入れます。

manage Contentを押します。
仮のデータを入れていきましょう。
もし、「Could not create an account as firebase@flutterflow.io to your Firebase project. Make sure "Email Sign-In" is turned on for your Firebase project, and try again.」エラーが出た場合はこちらの記事をご覧下さい。

production で作ったカラムのidをコピーしておきましょう。

次はLocationの仮のデータを入れましょう。

先程のコピーしたidをownerにペーストしましょう。

次はLocationのidをProductionにペーストします。

遷移先での設定その①

遷移先でPage Parametersを押します。
（右上のプラスボタンです。）

「Add Parameter」ボタンを押します。

以下の写真のように設定します。
（それぞれ名前「適当」、Typeは「RecordReference」、Collection Typeは「Location」選択します。）

そのまま、ページ全体にAdd Queryを追加します。

遷移先での設定その②

以下の写真のように設定してください。

遷移元での設定その①

遷移元に移動しList Viewを選択します。

List ViewでAdd Queryします。
（設定は先程とほぼ同じです。）

以下のような確認画面が出ると思いますが、ConfirmでOKです。

遷移元での設定その②

画面遷移の設定をします。
List Viewで繰り返し表示するContalnerを選択して

Actionsタブを押します。

Add Actionを押し
以下のようにNavigate To を押し画面遷移先の「Location」を押して設定してください。

次はPassを設定します。
Passを押してください。

すると以下のようになると思います。

次はValueを設定します。
Valueを押し、Production Documentをおし、locations (List )で設定します。

すると以下のようになるので

List index OptionsをSpecific Indexを押します。

次に「また」Valueを押します

Production DocumentのIndex In Listを押します。

以下のようになりましたか？

遷移先での設定その③

遷移先に戻りましてGoogle Mapの設定をします。
Google Mapを選択して

Num Markers をMultipleにMarker TypeをDocumentに設定します。

Marker Documentsを設定します。
「Page Parameters」ではなく「locarion Documents」の「Documents（List）」に設定

以下の写真のようになります。

テスト

クリックすると

「あれ？」
ってそうかInitial Location (lat, lng）をデフォルトだとブリッジタウンになります。

岐阜に移動するとちゃんと2つ設定されていますね！

今回はここまでです。最後までご覧いただきましてありがとうございます。