リスト内のカード

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

Cardは、角が丸く、画面から浮き上がって見える柔らかな影が付いたパネルです。中の要素をまとめるため、リストの各項目がひとまとまりとして表示されます。

Card(
  child: ListTile(
    leading: Icon(Icons.flight),
    title: Text('Paris'),
    subtitle: Text('France, May 3'),
  ),
)

カードの周囲には小さな余白ができるため、リスト内のカードは互いに離れて表示されます。margin:で余白を変更し、color:で色を変更し、elevation:で影を濃くできます。

Card内のListTileは、Flutterアプリで最もよく使われる要素のひとつです。注文、メッセージ、旅行のリストを思い浮かべてください。

チャレンジ

簡単

パリ旅行はカードに表示されています。京都とリマの旅行も、それぞれ1枚のカードに表示してください。

自分で試してみよう

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('My Trips')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Card(
              child: ListTile(
                leading: const Icon(Icons.flight),
                title: const Text('Paris'),
                subtitle: const Text('France, May 3'),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Kyoto'),
              subtitle: const Text('Japan, June 12'),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Lima'),
              subtitle: const Text('Peru, August 20'),
            ),
          ],
        ),
      ),
    );
  }
}