FlutterでのLazy Loadingリストビューの実装

Flutterアプリケーションでは、データを効率的に読み込むためにLazy Loading（遅延読み込み）を実装することが可能です。この記事では、ListView.builder を使用して、ユーザーがリストの末尾に到達した時に追加のデータを読み込む方法を説明します。

Lazy Loadingの基本

Lazy Loadingは、ユーザーがスクロールしてリストの末尾に達したときにのみデータをフェッチする手法です。これは、ユーザーが必要とするデータのみをロードするため、アプリのパフォーマンスとユーザーエクスペリエンスを向上させます。

ステップバイステップの実装

以下のコードは、FlutterでのLazy Loadingリストビューの基本的な実装を示しています。

初期データのセットアップ

まず、初期データセットを作成し、これをリストビューに表示します。

class _LazyLoadingListState extends State<LazyLoadingList> {
  final List<String> _data = List.generate(20, (index) => "Item ${index + 1}");
  // ...
}

ScrollControllerの追加

ScrollController を追加し、リストがスクロールされたときのイベントをリスニングします。

final ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      _fetchMoreData();
    }
  });
}

データのフェッチ関数

ユーザーがリストの最後に到達したことを検知したら、新しいデータをフェッチする関数を呼び出します。

Future<void> _fetchMoreData() async {
  // データフェッチロジック
}

ビルド関数

ListView.builder を使用して、リストアイテムを動的に生成し、ローディングインディケーターを表示します。

@override
Widget build(BuildContext context) {
  return ListView.builder(
    // ...
  );
}

上記を組み合わせたサンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lazy Loading List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LazyLoadingList(),
    );
  }
}

class LazyLoadingList extends StatefulWidget {
  @override
  _LazyLoadingListState createState() => _LazyLoadingListState();
}

class _LazyLoadingListState extends State<LazyLoadingList> {
  final List<String> _data = List.generate(20, (index) => "Item ${index + 1}");
  final ScrollController _scrollController = ScrollController();
  bool _isFetching = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent && !_isFetching) {
        _fetchMoreData();
      }
    });
  }

  Future<void> _fetchMoreData() async {
    setState(() {
      _isFetching = true;
    });

    // Fake delay to simulate network request
    await Future.delayed(Duration(seconds: 2));

    // Generate fake data and add it to the list
    final newItems = List.generate(10, (index) => "Item ${_data.length + index + 1}");
    setState(() {
      _data.addAll(newItems);
      _isFetching = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lazy Loading List'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _data.length + (_isFetching ? 1 : 0),
        itemBuilder: (BuildContext context, int index) {
          if (index == _data.length) {
            // Show a loading indicator at the end of the list
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          return ListTile(
            title: Text(_data[index]),
          );
        },
      ),
    );
  }

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

まとめ

Lazy Loadingは、大量のデータを扱うFlutterアプリケーションにとって有効なテクニックです。ListView.builder と ScrollController を使用することで、簡単に実装することができます。