Đường phân cách giữa các hàng

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 5 trên 33.

Các hàng nằm sát nhau rất khó phân biệt. Divider vẽ một đường màu xám mảnh xuyên suốt danh sách:

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

Nó nằm giữa hai hàng, vì vậy danh sách có bốn hàng cần ba dấu phân cách và không cần dấu nào sau hàng cuối cùng.

Divider có một vài tùy chọn để bạn điều chỉnh: thickness: cho độ dày của đường kẻ, color: cho màu sắc và indent: để bắt đầu đường kẻ xa mép trái hơn.

Thử thách

Dễ

Danh sách cài đặt hiện chỉ có một đường kẻ giữa Wi-Fi và Bluetooth. Thêm một Divider vào giữa mỗi hai hàng, để có ba đường kẻ và không có đường kẻ nào sau Sound.

Tự làm thử

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