FlutterFlow で横スクロールの ListView を実装する方法

FlutterFlow で横スクロール可能な ListView を実装する方法を解説します。Supabase と連携してデータベースから情報を取得し、画像やテキストを動的に表示する手順をステップごとに紹介します。リストが横方向にスクロールする動きの実現を目指します。

ゴールイメージ

※ 簡単なリストにSupabaseのAPIから「ベネフィット」情報を取得し、FlutterFlowでホリジョンタルに表示する。リストにはアイコンとタイトルが展開され、カードやリストのような見た目になる。

より詳しい内容は以下のYoutubeでご確認ください。

実装ステップ

1. Supabaseのテーブルを準備する

Supabaseのテーブルは下記の構成です。例として、ベネフィットを格納したデータベースを推奨します。

Column	Type	Description
id	serial	Primary Key
created_at	timestamptz	Created timestamp
benefit_name	varchar	ベネフィット名称
is_active	bool	アクティブフラグ
icon	varchar	アイコンパスを格納するURL

データサンプルの一部:

• id は自動主キー
• created_at は自動更新
• ベネフィットの情報はテキスト型のbenefit_nameに格納
• アイコン情報はicon のURLとして格納

2. SupabaseのAPIをFlutterFlowに繋げる

1. FlutterFlowのListViewのデータソースで「Supabase Query」を設定します。
   • Table: benefits
   • Query Type: List of Rows
   • フィルタなしのケースで、全てのローを取得。
   • Query Cache: ON
2. 情報をリストで表示する点
   • ListView Widget を使用。
   • Axisを「Horizontal」に設定し、データを展開する。
   • Items Spacing を指定して、問題ないように調整します。

3. アイコンとタイトルを表示

1. Container の中に「Column Widget」を製作
   • 上部: Image Widget を追加し、icon フィールドを設定。
     • Image Type: Network
     • Path: benefits Row -> icon
2. 下部: Text Widget を追加し、benefit_name を表示する。
   • Textは見やすいサイズに調整。

4. FlutterFlowで実行し、動作を確認する

1. Supabase Queryから情報が正常に展開されることを確認。
2. ListView のスクロールが正常に動作していることを検証。

---

FlutterFlow と Supabase の連携での注意点

• Supabaseの認証設定に気をつける
  • API Key の使い方に注意。Public APIは正しいデータみを格納するように設定。
• FlutterFlowのデータバインディング
  • TableのColumn名は正確に設定しているか確認。

---

まとめ

FlutterFlowとSupabaseの連携により、短時間でリストの実装が可能になります。データ取得から展開まで、APIおよびFlutterFlowのUIを最大限活用した開発で、視覚的なアプリを作成していきましょう。