בניית שורות באמצעות בונה

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 6 מתוך 33.

רשימת השמעה יכולה להכיל אלפי שירים. אי אפשר לכתוב ListTile עבור כל אחד מהם, ובנייה של כולם בבת אחת תהיה איטית. ListView.builder בונה כל שורה רק כשהיא נכנסת לתצוגה בזמן הגלילה.

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

itemCount מציין כמה שורות יש. itemBuilder היא פונקציה שהרשימה קוראת לה עבור כל שורה, עם ה-index של השורה: 0 עבור השורה הראשונה, 1 עבור הבאה, וכן הלאה. היא מחזירה את הרכיב של אותה שורה.

השתמשו ב-songs.length עבור itemCount, כדי שהרשימה תגדל כשגם רשימת השירים גדלה. מספר גדול יותר ממספר הפריטים ברשימה מבקש שיר שאינו קיים, והאפליקציה נעצרת עם RangeError.

אתגר

קל

ברשימת ההשמעה יש 15 שירים, אבל מוצגים רק 3. תקן את itemCount כך שכל השירים יופיעו ברשימה, עד Starfall, ושהרשימה תישאר נכונה גם כשמוסיפים שירים.

נסו בעצמכם

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]));
          },
        ),
      ),
    );
  }
}