Flutter: Card-Widget und Einsatz im Design

Card ist ein Material-Design-Widget, das im Layout einen Karteneffekt erzeugt. Es eignet sich für Listen und feste Seitenbereiche. Mit Schatten und abgerundeten Ecken hebt es Inhalte hervor.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card Content'),
  ),
)

Wichtige Eigenschaften

Eigenschaft	Beschreibung
elevation	Höhe des Schattens
shadowColor	Farbe des Schattens
shape	Form der Karte (Eckenradius)
color	Hintergrundfarbe
margin	Außenabstand
clipBehavior	Verhalten beim Zuschneiden des Inhalts

Angepasste Card

Card(
  elevation: 8,
  shadowColor: Colors.blue.withOpacity(0.5),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  color: Colors.white,
  margin: EdgeInsets.all(8),
  child: ...
)

Card mit Rahmen (ohne Schatten)

Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
    side: BorderSide(color: Colors.grey, width: 1),
  ),
  child: ...
)

Card mit Bild

Card(
  clipBehavior: Clip.antiAlias, // Clip image corners
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Column(
    children: [
      Image.network(
        'https://example.com/image.jpg',
        height: 150,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('Card Title'),
      ),
    ],
  ),
)

Verwendung mit ListTile

Card(
  child: ListTile(
    leading: CircleAvatar(child: Icon(Icons.person)),
    title: Text('Username'),
    subtitle: Text('Subtitle'),
    trailing: Icon(Icons.chevron_right),
    onTap: () {},
  ),
)

Antippbare Card mit InkWell

Card(
  child: InkWell(
    onTap: () {
      print('Card tapped');
    },
    borderRadius: BorderRadius.circular(12),
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Tappable Card'),
    ),
  ),
)

Zusammenfassung

• Card: Karten-Widget nach Material Design
• elevation: Tiefe des Schattens
• shape: Eckenradius und Rahmen
• clipBehavior: Wichtig für das Zuschneiden von Bildern
• ListTile: Listeneintrag innerhalb der Karte

Card ist ein hervorragendes Mittel, um Inhalte visuell zu gruppieren.