Baris dengan Pemisah

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 8 dari 33.

List panjang lebih mudah dibaca jika ada garis di antara baris-barisnya. Dengan builder, kamu tidak bisa menulis Divider secara manual, jadi ada jenis list builder kedua yang menambahkannya untukmu:

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

separatorBuilder dipanggil untuk setiap celah di antara dua baris dan mengembalikan widget yang ditempatkan di sana. List dengan 15 baris memiliki 14 pemisah, dan tidak pernah ada pemisah setelah baris terakhir.

Pemisahnya bisa berupa widget apa pun: Divider, atau SizedBox untuk ruang kosong.

Tantangan

Mudah

Ubah playlist menjadi ListView.separated dengan Divider di antara setiap dua lagu.

Coba sendiri

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