Cards mit Flutter

Cards mit Flutter

Cards in Flutter lassen sich am ehesten mit Visitenkarten
oder Businesskarten vergleichen.

In einem Rechteck werden Informationen präsentiert. Dabei sollte der Raum nicht überladen wirken. Die Card sollte für sich alleine stehen können. Wer mehr über die Design Vorstellungen von Google zu diesem Element wissen möchte findet hier Informationen. 

Was sind nun die Einsatzmöglichkeiten ? Cards sind flexibel einsetzbar. Aber ihre Stärke ist die Darstellung von Datensätzen, die aus einer relativ kleinen Anzahl von Felder bestehen.

Parameter von Card(...)

Werfen wir zum Start einen Blick auf die Parameter:

Das erste was bei den Parametern auffällt: Ich kann keine Höhe und Breite definieren ! Das ist insofern wichtig, das sich jetzt die Frage stellt, in welchem Context soll die Card(...) stehen ?

Benötige ich Höhe und Breite muss die Card(...) ein child: eines Widgets sein, der diese Parameter annimmt, wie zum Beispiel das Container(...) Widget. 

Ansonsten sind die Parameter einfach zu verstehen:

color: Die Hintergrundfarbe der Card.

shadowColor: Die Farbe des Schlagschattens

elevation:  Die Länge des Schattens

shape: Wird benötigt, wenn Du zum Beispiel abgerundete Ecken möchtest.

borderOnForeground: Der Rand der Karte vor der Karte, oder nicht.

margin: Abstand zum nächsten Widget

Auf clipBehavior und semanticContainer gehe ich nicht ein. Diese zwei verdienen einen eigenen Post 😀

Das Ergebnis vor dem Code

Normalerweise zeige ich das Ergebnis am Schluss. Aber mal was anderes im Jahr 2022 :

Das Ergebnis des Codes von unten

Der Code

Der Beispielcode ist als Widget (class extends..) angelegt. Im Code selbst sind Hauptlayout Elemente mit Kommentar versehen:

class MeineCard extends StatelessWidget {
  const MeineCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Card(
      color: Colors.lightBlueAccent,
      elevation: 8.0,
      child: Container( //Hauptcontainer
        padding: const EdgeInsets.symmetric(vertical: 18.0,horizontal: 18.0),
        height: 200.0,
        width: 350.0,
        child: Column( //Hauptcolumne
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row( // Row eins
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children:  [
                  const CircleAvatar(
                    radius: 50,
                    backgroundImage: AssetImage('lib/bilder/officeWorker.png'),

                  ),
                  Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 8),
                        width: 150.0,
                        color: Colors.black54,
                        height: 2.0,
                      ),
                      const SizedBox(height: 4.0,),
                      const Text('202065656598'),
                      const Text('Zürich'),
                      const Text('flutterCode'),
                    ],
                  )
                ],
              ),
              const SizedBox(height: 20,),
              Row( // row zwei
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [

                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text('flutterCode',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4,),
                      Text('flutterCode'),
                    ],
                  ),
                  const SizedBox(width: 32,),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: const [
                      Text(
                        'Card Test Code',
                        style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4,),
                      Text('The flutter Blog'),
                    ],
                  )

                ],
              )
            ]
        ),
      ),
    );
  }
}

Betrachten wir die Hauptlayout Elemente in einem Diagramm. Die Pfeile symbolisieren die Richtung, in welcher die Elemente im entsprechenden Widget angeordnet werden:

Diagramm eins

Der Hauptcontainer erhält Werte für Höhe und Breite. Zusätzlich wird ein padding: definiert. Du erinnerst Dich, das ist der Abstand vom Inhalt des Container (Hauptcolumne) zum Rand des Containers.

Die Hauptcolumne erhält einen Wert für CrossAxisAlignment, die horizontale Achse, von .start. 

Row eins und Row zwei enthalten beide die Parameter für ein Main - und CrossAxisAlignment. 

Row eins

Um das Layout zu erreichen hat Row eins folgende Widgets:

Diagramm zwei

Die Pfeile symbolisieren wieder die Laufrichtung der Elemente innerhalb des Widgets. Wenn Du das Ergebnis Bild oben anschaust, siehst Du rechts oben einen Strick. Dafür sorgt der Container. 

Während das CircleAvatar(...) Widget direkt in die Row(...) eingefügt wird, bekommen die restlichen Widgets ein Column(...) Widget als Eltern Widget. Das sichert die gewünschte Anordnung von Container, SizedBox (Erzeugt einen Leerraum) und den Text Widgets.

Row zwei

Row zwei enthält zwei Column(...) Widgets.

Diagramm drei

Beide Column(...) Widgets enthalten einen CrossAxisAlignment Wert. Ich gehe hier absichtlich nicht tiefer auf die Parameter ein. Sie sind an anderer Stelle in diesem Blog schon angesprochen worden, oder lassen sich mühelos googeln. 

Du kannst mit dem Code gut experimentieren. Zum Beispiel noch einen shape: hinzufügen:

shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20.0),
            bottomRight: Radius.circular(20.0),
          )
      )

Das sieht dann so aus:

Mit auf einer Seite abgerundeten Ecken

Das war es für diesmal. Bis bald !