Flutterで無限ListViewをやろうとしていくつか躓いて調べたことのメモです。

前提

検索バーに入力したワードの検索結果をListViewに表示する
検索結果はListViewに表示される部分だけを必要に応じて非同期に取得
無限ListViewといっても検索結果の個数は有限
検索バーのワードを変更するとListViewはリセットされ、新しい検索結果を表示

ひとまず作ってみたもの

Flutterで無限ListViewをやる方法をググると ListView.builder を使えばできるという情報が複数みつかるので、ListView.builder でやってみたのが以下のコードです。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView Example",
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _query = "";
  final _searchResults = <String>[];
  bool _loading = false;

  @override
  Widget build(BuildContext context) {
    return FloatingSearchAppBar(
      body: _buildListView(),
      onSubmitted: (query) {
        setState(() {
          _query = query;
          _searchResults.clear();
        });
      },
    );
  }

  Widget _buildListView() {
    return ListView.builder(itemBuilder: (context, index) {
      if (index < _searchResults.length) {
        return _buildItem(_searchResults[index]);
      }
      if (!_loading) {
        _fetchSearchResults(index, 10);
      }
      return const Center(child: const CircularProgressIndicator());
    });
  }

  Widget _buildItem(String searchResult) {
    return ListTile(title: Text(searchResult));
  }

  Future<void> _fetchSearchResults(int offset, int count) async {
    _loading = true;

    Future.delayed(Duration(seconds: 1), () {
      // 検索ワードによって結果の個数が変わるようにする。hashCode を使って適当に個数を決定。
      final max = _query.hashCode % 50 + 20;
      if (max < offset + count) {
        count = max - offset;
      }

      final _fetched = <String>[];
      for (int i = 0; i < count; ++i) {
        _fetched.add("${_query} ${offset + i + 1}");
      }

      setState(() {
        _searchResults.addAll(_fetched);
        _loading = false;
      });
    });
  }
}

これを実行すると、プログレスインジケーターが沢山表示されてしまいました。

itemBuilder で _searchResults.length 以上のインデックスには全部 CircularProgressIndicator を返しているので当然ですね。

      if (index < _searchResults.length) {
        return _buildItem(_searchResults[index]);
      }
      ...
      return const Center(child: const CircularProgressIndicator());

itemBuilder からアイテムを返すのを打ち切る必要がありますが、ググると itemBuilder から null を返せばよいという情報が見つかります。しかし、itemBuilder の型は

typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

なので、null を返せません。Flutter が Null Safty になったことで仕様が変わったのでしょうか？　もう少し調べてみると、IndexedWidgetBuilder の他に NullableIndexedWidgetBuilder というのがあり、これを使うには ListView.builder ではなく ListView.custom で ListView を作れば良いことがわかりました。

ListView.custom に変更したコード

先ほどのコードの ListView.builder(...) のところを次のようにしました。ついでに、検索ワードが空の時もすぐに打ち切るようにしました。

  ...
  Widget _buildListView() {
    return ListView.custom(
        childrenDelegate: SliverChildBuilderDelegate((context, index) {
          if (_query.isEmpty) {
            return null;
          }
          if (index < _searchResults.length) {
            return _buildItem(_searchResults[index]);
          }
          if (!_loading) {
            _fetchSearchResults(index, 10);
            return const Center(child: const CircularProgressIndicator());
          }
          return null;
        })
    );
  }
  ...

これでプログレスインジケーターが１つだけ表示されるようになりました。

検索結果の終端までスクロールしたときにプログレスインジケーターが残ったまま

検索結果の終端までスクロールしたときにプログレスインジケーターが残ったままになっているので、これを直すために次の修正をしました。_MyHomePageState クラスに _noMoreItems というインスタンス変数を追加して、それに関する修正を数カ所行っています。

class _MyHomePageState extends State<MyHomePage> {
  ...
  bool _noMoreItems = true;  // ← これを追加
  
  @override
  Widget build(BuildContext context) {
    ...
        setState(() {
          _query = query;
          _searchResults.clear();
          _noMoreItems = false;  // ← これを追加
        });
    ...
  }

  Widget _buildListView() {
    ...
          if (!_loading && !_noMoreItems) {  // ← ここを修正
            _fetchSearchResults(index, 10);
            return const Center(child: const CircularProgressIndicator());
          }
    ...
  }
  ...
  Future<void> _fetchSearchResults(int offset, int count) async {
     ...
      setState(() {
        _searchResults.addAll(_fetched);
        _loading = false;
        _noMoreItems = _fetched.isEmpty;  // ← これを追加
      });
    });
  }

ListViewをスクロールした状態で検索ワードを変更するとエラーが発生

ListViewの検索結果をスクロールした状態で検索ワードを変更すると、次のエラーが発生しました。

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/sliver_list.dart': Failed assertion: line 186 pos 16: 'earliestUsefulChild != null': is not true.

（以下省略）

ListViewの内容をクリアするには setState の中で表示するデータを保持しているリストをクリアすればいいと考えたのですが、

  Widget build(BuildContext context) {
    ...
      onSubmitted: (query) {
        setState(() {
          _query = query;
          _searchResults.clear();  // ← これ
          _noMoreItems = false;
        });
      ...

どうやらそれだけではダメな感じです。Flutterの理解がまだ十分ではなくよくわかってないのですが、Widgetの key というやつが関係してそうです。

この動画を見て、ListViewの内容をクリアするにはListViewのkeyを変えてやればいいのでは？　と考えて次のように修正しました。

...
class _MyHomePageState extends State<MyHomePage> {
  ...
  Key? _listViewKey;  // ← これを追加

  @override
  Widget build(BuildContext context) {
    ...
      onSubmitted: (query) {
        setState(() {
          _query = query;
          _searchResults.clear();
          _noMoreItems = false;
          _listViewKey = UniqueKey();  // ← これを追加
        });
      ...
  }

  Widget _buildListView() {
    return ListView.custom(
        key: _listViewKey,  // ← これを追加
        ...

これで先ほどのエラーは出なくなりました。

最終的なソースコード

最後に、でできたソースコード全体を載せておきます。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView Example",
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _query = "";
  final _searchResults = <String>[];
  bool _loading = false;
  bool _noMoreItems = true;
  Key? _listViewKey;

  @override
  Widget build(BuildContext context) {
    return FloatingSearchAppBar(
      body: _buildListView(),
      onSubmitted: (query) {
        setState(() {
          _query = query;
          _searchResults.clear();
          _noMoreItems = false;
          _listViewKey = UniqueKey();
        });
      },
    );
  }

  Widget _buildListView() {
    return ListView.custom(
        key: _listViewKey,
        childrenDelegate: SliverChildBuilderDelegate((context, index) {
          if (_query.isEmpty) {
            return null;
          }
          if (index < _searchResults.length) {
            return _buildItem(_searchResults[index]);
          }
          if (!_loading && !_noMoreItems) {
            _fetchSearchResults(index, 10);
            return const Center(child: const CircularProgressIndicator());
          }
          return null;
        })
    );
  }

  Widget _buildItem(String searchResult) {
    return ListTile(title: Text(searchResult));
  }

  Future<void> _fetchSearchResults(int offset, int count) async {
    _loading = true;

    Future.delayed(Duration(seconds: 1), () {
      // 検索ワードによって結果の個数が変わるようにする。hashCode を使って適当に個数を決定。
      final max = _query.hashCode % 50 + 20;
      if (max < offset + count) {
        count = max - offset;
      }

      final _fetched = <String>[];
      for (int i = 0; i < count; ++i) {
        _fetched.add("${_query} ${offset + i + 1}");
      }

      setState(() {
        _searchResults.addAll(_fetched);
        _loading = false;
        _noMoreItems = _fetched.isEmpty;
      });
    });
  }
}