先頭と末尾

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

ListTileには両端にスロットがあります。leading:はタイトルの前に配置され、通常はアバターまたはアイコンが入ります。trailing:は行の一番端に配置され、通常はアイコンまたは時刻などの短いテキストが入ります。

ListTile(
  leading: CircleAvatar(child: Text('AL')),
  title: Text('Ada Lovelace'),
  trailing: Icon(Icons.call),
)

タイルがすべての位置を揃えてくれます。leadingウィジェットは左側に、タイトルとサブタイトルは中央に配置され、trailingウィジェットは右端に寄せられます。RowもSizedBoxも書く必要はありません。

チャレンジ

簡単

Adaの行には、彼女のイニシャルが入ったアバターと電話アイコンがあります。ほかの2行にも同じものを設定しましょう。

イニシャル AT と GH が入った leading: の CircleAvatar
trailing: の Icon(Icons.call)

自分で試してみよう

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('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              leading: CircleAvatar(child: Text('AL')),
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
              trailing: Icon(Icons.call),
            ),
            ListTile(
              title: Text('Alan Turing'),
              subtitle: Text('+1 555 0102'),
            ),
            ListTile(
              title: Text('Grace Hopper'),
              subtitle: Text('+1 555 0103'),
            ),
          ],
        ),
      ),
    );
  }
}