Menu
CoddyTech

Bir Oluşturucu ile Satırlar Oluşturma

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 6 / 33.

Bir çalma listesinde binlerce şarkı bulunabilir. Her biri için bir ListTile yazmak mümkün değildir ve hepsini aynı anda oluşturmak yavaş olur. ListView.builder, her satırı yalnızca ekranda görünür hâle geldiğinde oluşturur.

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

itemCount, kaç satır olduğunu belirtir. itemBuilder, listenin her satır için, satırın index değeriyle çağırdığı bir işlevdir: ilk satır için 0, sonraki satır için 1 ve böyle devam eder. O satırın bileşenini döndürür.

Şarkı listesi büyüdükçe liste de büyüsün diye itemCount için songs.length kullan. Listeden daha büyük bir sayı, listede olmayan bir şarkıyı istemek anlamına gelir ve uygulama bir RangeError ile durur.

challenge icon

Görev

Kolay

Çalma listesinde 15 şarkı var, ancak yalnızca 3 tanesi görünüyor. Her şarkının, Starfall da dahil olmak üzere listede yer alması ve şarkılar eklendiğinde sayının doğru kalması için itemCount değerini düzelt.

Kendin dene

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]));
          },
        ),
      ),
    );
  }
}
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Listeler ve Ekranlar bölümündeki tüm dersler

Kendi başına pratik yap: Online Flutter derleyicisi