빌더로 행 만들기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 6번째.

재생 목록에는 수천 곡을 담을 수 있습니다. 각 곡마다 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]));
          },
        ),
      ),
    );
  }
}