ビルダーで行を作る

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 6/33。

プレイリストには何千曲もの曲を入れられます。曲ごとにListTileを書くことはできませんし、すべてを一度に作成すると処理が遅くなります。ListView.builderは、各行がスクロールして表示範囲に入ったときにだけ作成します。

ListView.builder(
  itemCount: songs.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(songs[index]));
  },
)

itemCountは行数を指定します。itemBuilderは、各行についてリストが呼び出す関数で、行のindexを受け取ります。最初の行は0、次の行は1というように続きます。この関数はその行のウィジェットを返します。

itemCountにはsongs.lengthを使い、曲のリストが増えたときに表示するリストも増えるようにします。リストより大きな数を指定すると、存在しない曲を要求することになり、アプリはRangeErrorで停止します。

チャレンジ

簡単

プレイリストには15曲ありますが、表示されるのは3曲だけです。すべての曲がリストに含まれ、最後のStarfallまで表示され、曲が追加されても正しく保たれるように、itemCountを修正してください。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final List<String> songs = [
      'Morning Light',
      'Paper Planes',
      'City Rain',
      'Slow River',
      'Neon Nights',
      'Golden Hour',
      'Northern Wind',
      'Blue Harbor',
      'Quiet Storm',
      'Summer Static',
      'Echo Valley',
      'Last Train',
      'Silver Lines',
      'Open Road',
      'Starfall',
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Playlist')),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}