Des cartes dans une liste

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 9 sur 33.

Un Card est un panneau aux coins arrondis et à l’ombre douce qui le fait ressortir de l’écran. Il regroupe les éléments qu’il contient, de sorte que chaque élément d’une liste se lise comme un tout.

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

Une carte conserve une petite marge autour d’elle, afin que les cartes d’une liste soient bien séparées. margin: la modifie, color: change sa couleur et elevation: accentue l’ombre.

Un ListTile à l’intérieur d’un Card est l’un des éléments les plus courants d’une application Flutter : pensez à une liste de commandes, de messages ou de voyages.

Défi

Facile

Le voyage à Paris se trouve sur une carte. Place aussi les voyages à Kyoto et à Lima sur des cartes, une carte par voyage.

Essayez vous-même

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