リストタイル

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

リスト内のほとんどの行はよく似ています。メインの行があり、その下に小さな行が付くこともあり、両端にアイコンが付くこともあります。ListTileは、適切なサイズとパディングが設定された、すぐに使える行です。

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

titleはメインの行です。subtitleはその下に表示され、文字が小さく、色も控えめです。どちらもウィジェットを受け取り、通常はTextを使います。

ListTileはリストと同じ幅になり、サブタイトルがある場合は2行に収まるように高さが広がります。これをいくつかListViewに並べれば、連絡先リストが作れます。

チャレンジ

簡単

Adaの行はすでにListTileです。ほかの2つのテキストも、Adaのものと同じようにタイルにしましょう。

サブタイトルが+1 555 0102のAlan Turing
サブタイトルが+1 555 0103のGrace Hopper

自分で試してみよう

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(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}