Cards in a List

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 9 of 33.

A Card is a panel with rounded corners and a soft shadow that lifts it off the screen. It groups the things inside it, so each item of a list reads as one piece.

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

A card leaves a small margin around itself, so cards in a list stand apart. margin: changes it, color: changes its color, and elevation: makes the shadow deeper.

A ListTile inside a Card is one of the most common pieces of a Flutter app: think of a list of orders, messages or trips.

Challenge

Easy

The Paris trip is on a card. Put the Kyoto and Lima trips on cards too, one card each.

Try it yourself

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