Thẻ trong danh sách

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 9 trên 33.

Card là một bảng có các góc bo tròn và bóng đổ nhẹ, tạo cảm giác nổi trên màn hình. Nó nhóm các thành phần bên trong lại, giúp mỗi mục trong danh sách trông như một phần thống nhất.

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

Card có một khoảng lề nhỏ xung quanh, giúp các card trong danh sách tách biệt nhau. margin: thay đổi khoảng lề, color: thay đổi màu sắc và elevation: làm bóng đổ đậm hơn.

ListTile bên trong Card là một trong những thành phần phổ biến nhất của ứng dụng Flutter: hãy hình dung danh sách đơn hàng, tin nhắn hoặc chuyến đi.

Thử thách

Dễ

Chuyến đi Paris nằm trên một thẻ. Hãy đặt chuyến đi Kyoto và Lima lên các thẻ, mỗi chuyến một thẻ.

Tự làm thử

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