行間の区切り線

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 5/33。

隣り合った行は見分けにくいものです。Dividerを使うと、リスト全体に細い灰色の線を引けます。

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

線は2つの行の間に入るため、行が4つのリストには区切り線が3つ必要で、最後の行の後には必要ありません。

見た目を変えたい場合、Dividerにはいくつかの設定があります。線の太さを指定するthickness:、color:、そして左端から離れた位置から線を始めるindent:です。

チャレンジ

簡単

設定リストには、Wi-FiとBluetoothの間にのみ区切り線があります。2行ごとにDividerを追加して、区切り線を3本にし、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')),
          ],
        ),
      ),
    );
  }
}