FlutterFlowとSupabaseを使ったInfinite Scrollの実装方法

この記事では、FlutterFlowとSupabaseを活用して、Infinite Scroll（無限スクロール）を実現する方法を解説します。この記事のゴールは、ユーザーがスクロールするたびに新しいデータがロードされ、シームレスに表示されるリストビューを構築することです。（といいつつ、AIに書いてもらった備忘録のような記事ですが！！）

まずは、以下の動画をご覧ください。この動画では、この記事で構築する無限スクロール機能の完成イメージを示しています。

1. プロジェクトの概要
2. 必要な準備
3. Supabase Edge Functionの作成
1. サンプルコード
4. APIの設定
1. API構成の手順
2. FlutterFlowでの設定画面
5. FlutterFlowでのリストビュー構築
1. 手順
6. 動作確認
まとめ

1. プロジェクトの概要

FlutterFlowで作成する無限スクロールリストは、以下のような特徴を持っています：

Supabaseからデータを取得し、キーワードやページネーションを活用。
API経由でデータを動的に取得し、ページごとにデータをロード。
Infinite Scrollにより、リストビューがシームレスに拡張される。

2. 必要な準備

以下の手順を完了しておきましょう：

FlutterFlowプロジェクトを作成：リストビューを含む新しいFlutterFlowプロジェクトを作成します。
Supabaseプロジェクトを準備：Supabaseでデータベースを作成し、データテーブル（例: job_with_details）を設定します。

3. Supabase Edge Functionの作成

SupabaseでEdge Functionを作成し、データを取得するロジックを実装します。

サンプルコード

以下はEdge Functionの例です：

import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.46.2";

serve(async (req) => {
  try {
    const { keywords, per_page, page } = await req.json();
    const supabaseClient = createClient(
      Deno.env.get('SUPABASE_URL') ?? '',
      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
    );

    let query = supabaseClient
      .from('job_with_details')
      .select('*');

    if (Array.isArray(keywords)) {
      keywords.forEach(keyword => {
        query = query.ilike('benefit_names', `%${keyword}%`);
      });
    }

    if (typeof per_page === 'number' && typeof page === 'number' && page > 0) {
      const offset = (page - 1) * per_page;
      query = query.range(offset, offset + per_page - 1);
    }

    const { data, error } = await query;
    if (error) throw error;

    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' },
      status: 200,
    });
  } catch (error) {
    return new Response(JSON.stringify([]), {
      headers: { 'Content-Type': 'application/json' },
      status: 400,
    });
  }
});

このコードをSupabaseのEdge Functionにデプロイし、APIエンドポイントとして使用します。

ポイントはpageとper_page（※１回に受け取るデータの数）を受け取れるようにしているところです。

4. APIの設定

FlutterFlowでSupabaseのデータを取得するために、以下のAPIを設定します。

API構成の手順

API URLの設定:
- Supabaseのエンドポイントを使用します。
- メソッドタイプはPOSTを選択します。
[apiUrl]/functions/v1/infinite-search-jobs
Headers:
- apikeyとAuthorizationヘッダーを追加。
apikey: [apiAnonKey] Authorization: Bearer [apiAnonKey] Content-Type: application/json
Body:
- ページネーションと検索キーワードを送信するJSONボディを設定します。
{ "keywords": ["keyword"], "per_page": 10, "page": 1 }

※上記のkeywordsは無くてよいです。

FlutterFlowでの設定画面

上記の設定をFlutterFlowのAPI Call設定画面に入力します（画像参照）。

5. FlutterFlowでのリストビュー構築

FlutterFlowのUIでリストビューを作成し、Supabaseから取得したデータを表示するように設定します。

手順

リストビューの追加:
- ListViewウィジェットを画面に配置します。
データバインディング:
- APIレスポンスを変数に保存（例: jobList）。
- リストビューのデータソースをjobListに設定します。
Infinite Scrollの有効化:
- API Call設定でEnable Infinite Scrollをオンにします。
- ページネーション変数（例: page, per_page）を設定します。
- API Callするときの変数に”Next Page Index(ListView)を設定するところがポイントです。