Ayırıcılarla Satırlar

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

Uzun bir liste, satırların arasında bir çizgi olduğunda daha okunaklı olur. Bir oluşturucu kullanırken Divider öğelerini elle yazamazsın; bu yüzden bunları senin için ekleyen ikinci bir oluşturucu liste türü vardır:

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

separatorBuilder, iki satır arasındaki her boşluk için çağrılır ve oraya yerleştirilecek bileşeni döndürür. 15 satırlı bir listede 14 ayırıcı bulunur ve son satırdan sonra hiçbir zaman ayırıcı olmaz.

Ayırıcı herhangi bir bileşen olabilir: bir Divider veya boşluk bırakmak için bir SizedBox.

Görev

Kolay

Çalma listesini, her iki şarkının arasına bir Divider gelecek şekilde ListView.separated olarak değiştir.

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: songs.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(songs[index]));
          },
        ),
      ),
    );
  }
}