목록 속 카드

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 9번째.

Card는 모서리가 둥글고 부드러운 그림자가 있어 화면에서 살짝 떠 있는 패널입니다. 내부의 요소들을 하나로 묶어 목록의 각 항목이 하나의 덩어리처럼 보이게 합니다.

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

카드 주위에는 약간의 여백이 생기므로 목록에서 카드들이 서로 떨어져 보입니다. margin:은 여백을 변경하고, color:는 색상을 변경하며, elevation:은 그림자를 더 짙게 만듭니다.

Card 안에 넣는 ListTile은 Flutter 앱에서 가장 흔히 쓰이는 요소 중 하나입니다. 주문, 메시지 또는 여행 목록을 떠올려 보세요.

챌린지

쉬움

파리 여행은 카드에 표시되어 있습니다. 교토 여행과 리마 여행도 각각 카드 하나씩에 표시하세요.

직접 해보기

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