Pemisah Antarbaris

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

Baris yang bersebelahan sulit dibedakan. Divider menggambar garis tipis berwarna abu-abu melintasi daftar:

ListView(
  children: [
    ListTile(title: Text('Wi-Fi')),
    Divider(),
    ListTile(title: Text('Bluetooth')),
  ],
)

Garis ini berada di antara dua baris, jadi daftar dengan empat baris memerlukan tiga pemisah, dan tidak ada pemisah setelah baris terakhir.

Divider memiliki beberapa pengaturan yang bisa kamu gunakan untuk mengubah tampilannya: thickness: untuk garis, color:, dan indent: untuk memulai garis lebih jauh dari tepi kiri.

Tantangan

Mudah

Daftar pengaturan hanya memiliki satu garis antara Wi-Fi dan Bluetooth. Tambahkan Divider di antara setiap dua baris, sehingga ada tiga garis dan tidak ada garis setelah Sound.

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) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Settings')),
        body: ListView(
          children: const [
            ListTile(leading: Icon(Icons.wifi), title: Text('Wi-Fi')),
            Divider(),
            ListTile(leading: Icon(Icons.bluetooth), title: Text('Bluetooth')),
            ListTile(leading: Icon(Icons.battery_full), title: Text('Battery')),
            ListTile(leading: Icon(Icons.volume_up), title: Text('Sound')),
          ],
        ),
      ),
    );
  }
}