これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。
■ ListView（リストビュー）
SNS等で利用されている「無限スクロール」で利用されている。
一般的なリスト表示の仕様としては、まず表示したい数のデータ分の「モデル」を用意する必要がある。
- 描画：画面に表示されていない部分も描画処理がされている （無駄な処理なので、アプリが重たくなる！）
- 表示：画面に表示されている範囲だけが描画処理されている（仮想スクロール）
リストビューは「仮想スクロール」の仕組みを提供してくれている。
表示対象のデータが足りなくなった際に、追加でデータの取得処理を行う仕組みが「無限スクロール」という機能にあたる。
■ 「Column」Widgetと「ListView」Widgetの違い
【Column】
決められたスペースにバランスよくデータを配置できる。
【ListView】
たくさん存在するモデルの中から、決められた範囲の中に表示できる分だけ描画してくれる。
機能としては以下を提供してくれる。
- 仮想スクロール
- 無限スクロール
■ 「ListView」の定義方法
「ListView」のWidgetを作成する部分だけを抜粋してみました。
普段見慣れない定義が一部存在しているので、簡単に説明だけをのこしておきます。
final list = ListView.builder(
itemCount: models.length,
itemBuilder: (c,i) => modelToWidget(models[i]),
);
itemBuilder: (c,i) => modelToWidget(models[i]),
上記定義の「(c,i)」はそれぞれ
- c（context）：そのウィジェットのメタ情報&WidgetTree上の位置・・らしいです。（詳しく説明できなくてごめんなさい。）
- i（index）：何番目のモデルを参照するか番号を返却してくる
なお「models」の定義自体は事前に専用のclassを定義しており、テスト用に約20件のデータを宣言してあります。
■ 実際の動作画面のキャプチャ
スクロールしていくと、きちんとテスト用に作成したデータが表示されていきます。
■ その他
「引っ張り更新」の機能や「無限スクロール」等の機能については今回の説明では割愛させていただきます。（まだ作り方をしらないので・・）
最後に
Flutter（Dart言語）に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。
【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。