행 사이 구분선

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 5번째.

서로 바로 맞닿아 있는 행은 구분하기 어렵습니다. Divider는 목록을 가로지르는 얇은 회색 선을 그립니다.

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

두 행 사이에 들어가므로, 행이 네 개인 목록에는 구분선이 세 개 필요하며 마지막 행 뒤에는 구분선이 없습니다.

Divider의 모양을 바꾸고 싶다면 몇 가지 설정을 사용할 수 있습니다. 선의 두께를 지정하는 thickness:, 색상을 지정하는 color:, 왼쪽 가장자리에서 더 떨어진 곳에서 선이 시작되도록 하는 indent:입니다.

챌린지

쉬움

설정 목록에는 Wi-Fi와 Bluetooth 사이에만 구분선이 있습니다. 두 행 사이마다 Divider를 추가하여 구분선이 세 개가 되도록 하고, Sound 뒤에는 구분선이 없도록 하세요.

직접 해보기

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