Flutterで無限スクロールを実現！「infinite_scroll_pagination」の使い方

アプリで大量のデータを扱う場合、一度に全件読み込むのは非効率です。
そんなときに便利なのが、ページネーション（スクロールに応じて追加読み込み）を実現できる
infinite_scroll_pagination パッケージです。

1. infinite_scroll_paginationとは？
2. インストール方法
3. 基本的な使い方
4. グリッド表示に対応
5. まとめ
おわりに

1. infinite_scroll_paginationとは？

infinite_scroll_pagination は、リストやグリッドにおいて
無限スクロール（Lazy Load） を簡単に実装できるFlutterパッケージです。

ページ単位でデータを読み込み
スクロール位置に応じて自動で追加ロード
ローディング中やエラー時のUIも簡単に設定可能

2. インストール方法

pubspec.yaml に追加します。

dependencies:
  infinite_scroll_pagination: ^4.0.0

インストール後に以下を実行：

flutter pub get

3. 基本的な使い方

以下は、APIなどからアイテムをページごとに取得して表示する例です。

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class MyPagingPage extends StatefulWidget {
  @override
  _MyPagingPageState createState() => _MyPagingPageState();
}

class _MyPagingPageState extends State<MyPagingPage> {
  static const _pageSize = 20;

  final PagingController<int, String> _pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    super.initState();
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      // データ取得の例（APIやDBから取得する想定）
      final newItems = List.generate(
        _pageSize,
        (index) => 'アイテム ${(pageKey * _pageSize) + index}',
      );

      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('無限スクロール例')),
      body: PagedListView<int, String>(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate<String>(
          itemBuilder: (context, item, index) => ListTile(
            title: Text(item),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }
}

4. グリッド表示に対応

リストだけでなく、グリッド形式でも利用できます。

PagedGridView<int, String>(
  pagingController: _pagingController,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 2,
  ),
  builderDelegate: PagedChildBuilderDelegate<String>(
    itemBuilder: (context, item, index) => Card(
      child: Center(child: Text(item)),
    ),
  ),
);

5. まとめ

特徴	内容
ページネーション管理	スクロールに応じて自動でデータ追加
ローディング表示	デフォルトUIやカスタムUIを設定可能
エラー・再試行対応	失敗時にリトライボタンを表示可能
リスト・グリッド両対応	`PagedListView` と `PagedGridView` に対応