Karten in einer Liste

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 9 von 33.

Eine Card ist ein Feld mit abgerundeten Ecken und einem weichen Schatten, der es vom Bildschirm abhebt. Sie gruppiert die Elemente darin, sodass jeder Eintrag einer Liste als Einheit erscheint.

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

Eine Karte lässt einen kleinen Rand um sich herum, sodass sich Karten in einer Liste voneinander abheben. margin: ändert den Rand, color: ändert die Farbe und elevation: lässt den Schatten tiefer wirken.

Ein ListTile innerhalb einer Card ist eines der häufigsten Elemente einer Flutter-App: Denk an eine Liste von Bestellungen, Nachrichten oder Reisen.

Aufgabe

Einfach

Die Reise nach Paris befindet sich auf einer Karte. Platziere auch die Reisen nach Kyoto und Lima auf Karten, jeweils eine Reise pro Karte.

Probier es selbst

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