Flutter 無限リスト作成についてサンプルコードの意味が分からないため理解したい

Question

前提

Flutterのサンプルコードを使用してFlutterの勉強をしているFlutter初心者です。
無限リスト作成にて動作がよくわからない箇所があります。

実現したいこと

Flutterの無限リストのサンプルコードを理解したい

発生している問題・エラーメッセージ

描画のタイミングが１２個の英単語をリストに登録後に１０個の英単語を一気に画面に描画しているようでした。
ListView.builderにてitemCountをしていない場合、１２個のデータでリストを作成するという仕様なのでしょうか。
また、itemCountで「５」を指定してみたのですが、画面に描画されたのは３個でした。
画面上に表示されるのがリストの数より２個足らないのですがこの辺の制御がどこで行われているのかわからない状態です。
この辺の挙動についてご教示いただけますと幸いです。

また以下の書き方についても教えてください。
これはreturn _buildRow(_suggestions[index]);で呼び出されpairに代入。
WordPairはasPascalCaseを使用するために必要という感じでしょうか。
（プログラミング自体あまりやってなく、構文等わからず、調べてもこの辺の記載方法が何を指しているのかなどわからず。。。）

Widget _buildRow(WordPair pair)

該当のソースコード

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Startup Name Generator',
        home: RandomWords()
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
    body: _buildSuggestions(), //Widget _buildSuggestions()で作成したウィジェット
    );
  }
  Widget _buildSuggestions() { //_buildSuggestionsというウィジェットを作成する
    return ListView.builder( //itemBuilderプロパティで返すWidgetを複数作成するWidget
        padding: const EdgeInsets.all(15.0),//余白の設定。all以外はonly(top,right,bottom,left),symmetry(horizontal,vertical)
        itemBuilder: (context, i) {//contextは画面表示内容を生成するために必要なもの。iは0から始まり、呼び出されるたびに加算。

          if (i.isOdd) return Divider();//iが奇数だった場合に罫線を入れる
          final index = i ~/ 2; //~を入れることで整数を返す
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

試したこと

ブレイクポイントにてリスト登録事に動作を止めてどのタイミングで画面に描画されるのかを確認しました。

補足情報（FW/ツールのバージョンなど）

OS：Windows11
IDE：Android Studio
Flutter 3.0.4
english_words-4.0.0

Answer 1

まず使用するAPIのヘルプは読みましょう。

https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

これによると、表示対象となるアイテムのみビルダーが呼び出されるとのことです。

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
このコンストラクタは、実際に表示されている子供たちに対してのみビルダが呼び出されるため、大きな（あるいは無限の）数の子供を持つリストビューに適しています。

なので12個というのは、作られた画面に表示可能な個数なのでしょう。
この数は、ListViewの縦の大きさに依存するので、画面が大きければもっと多く(私のだと34でした)のiの値で呼び出されます。
またスクロールすることでiの値はいろいろ変わります。これはスクロールしたことで空いたスペースにデータを表示する必要があり、その位置の番号がiで指定されたという意味になります。

この値はitemBuilderのしょっぱなにdebugPrint("index $i");を入れて初期表示やスクロールした際にどのような値で呼び出されるか確認したほうが良いでしょう。

次に「itemCountで「５」を指定してみたのですが、画面に描画されたのは３個でした。」の件。
ビルダー内で、iが奇数の時に罫線を入れてます。
そのため実際に単語が表示されるのはiが0,2,4の3回のみです。
まさしく実装通りの動きをしています。
ちなみにitemCountはitemBuilderで呼び出される際のiが許容する範囲です。この場合iは0～4の値しか来ません。

最後に_buildRowの件。
一応その認識で合ってはいます。

実際には以下の様な意味合いです。
_suggestionsはWordPairクラスをListで保持している変数。
return _buildRow(_suggestions[index])は、_suggestionsのindexで示される場所に設定されているWordPairデータを_buildRowに渡し、その中でListTileウィジェット作成しを返す。ListTileはTextを含みそのTextの文字列としてWordPairデータのasPascalCaseを使用している。

最後に
flutterで使われているDat言語の簡易説明は https://dart.dev/guides/language/language-tour に掲載されています。
英語ですがブラウザの日本語翻訳機能を使えばある程度の意味は理解できると思います。

Comments

[KentarouHayashi]

ご回答ありがとうございます。
理解いたしました！！！また、参考となるURLまで送っていただきありがとうございました。