Dart Kurs Naechste Lektion

Lektion 10 - Widgets, Row/Column & Links

Flutter-Oberflaechen als Widget-Baum verstehen

In Flutter besteht jede Oberflaeche aus Widgets. Heute lernst du, wie Widgets verschachtelt werden, wie Row und Column Layouts bauen und wie du klickbare Elemente beziehungsweise Navigation planst.

1. Was ist ein Widget?

Ein Widget ist ein Baustein der Oberflaeche. Manche Widgets zeigen etwas an, andere ordnen Widgets an, andere reagieren auf Klicks.

Widget-ArtBeispiele
AnzeigeText, Icon, Image
LayoutColumn, Row, Center, Padding
InteraktionElevatedButton, TextButton, GestureDetector
StrukturScaffold, AppBar, MaterialApp

2. Der Widget-Baum

Widgets liegen oft ineinander. Das nennt man Widget-Baum. Ein Eltern-Widget enthaelt Kind-Widgets. Ein Scaffold kann zum Beispiel eine AppBar und einen body enthalten. 

MaterialApp
  Scaffold
    AppBar
      Text
    body
      Center
        Column
          Text
          Row
            Button
            Button

3. Column: von oben nach unten

Column ist fuer vertikale Anordnung. Alles in children wird von oben nach unten angezeigt. 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Ueberschrift'),
    Text('Beschreibung'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Start'),
    ),
  ],
)
children

Liste der Widgets in dieser Spalte.

mainAxisAlignment

Ausrichtung entlang der Hauptachse, bei Column also vertikal.

crossAxisAlignment

Ausrichtung quer zur Hauptachse, bei Column also horizontal.

4. Row: von links nach rechts

Row ist fuer horizontale Anordnung. Du nutzt sie fuer Buttonleisten, kleine Infozeilen oder nebeneinanderliegende Elemente. 

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('-1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('+1'),
    ),
  ],
)

Achtung: Wenn eine Row zu viele breite Kinder hat, kann sie ueberlaufen. Dann helfen kleinere Buttons, Wrap oder ein anderes Layout.

5. Padding, SizedBox und Abstand

Layout besteht nicht nur aus Row und Column. Du brauchst auch Abstand und Innenraum, damit die Oberflaeche lesbar wird.

Padding

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Mit Abstand'),
)

SizedBox

Column(
  children: [
    Text('Oben'),
    SizedBox(height: 16),
    Text('Unten'),
  ],
)

6. Links und Navigation in Flutter

In Flutter gibt es nicht denselben HTML-Link wie im Web. Fuer App-Navigation nutzt du meistens Buttons oder klickbare Widgets, die eine Aktion ausloesen. Spaeter kann diese Aktion zu einer anderen Seite navigieren.

Ein klickbarer Button

TextButton(
  onPressed: () {
    print('Link geklickt');
  },
  child: Text('Mehr anzeigen'),
)

Navigation vorbereiten

ElevatedButton(
  onPressed: () {
    // Navigator.push(...)
  },
  child: Text('Zur Detailseite'),
)

Wichtig: Plane erst, wohin ein Klick fuehren soll. Danach entscheidest du, ob es ein Button, TextButton, IconButton oder eine spaetere Navigation wird.

7. Von Skizze zu Widget-Baum

Wenn du eine Oberflaeche bauen sollst, beschreibst du sie zuerst in Worten. Danach machst du daraus einen Widget-Baum.

Beschreibung

Oben steht ein Titel.
Darunter steht ein kurzer Hinweis.
Dann kommen zwei Buttons nebeneinander.
Darunter steht ein Link zur Hilfe.

Widget-Baum

Column
  Text Titel
  Text Hinweis
  Row
    Button Start
    Button Reset
  TextButton Hilfe

8. UI-Planungsaufgabe

Aufgabe: Plane eine kleine Flutter-Startseite. Sie soll einen Titel, eine Beschreibung, zwei Aktionsbuttons in einer Row und einen Hilfe-Link enthalten. Schreibe zuerst eine kurze UI-Planung und leite daraus den Widget-Baum ab. 

Zeige eine Seite mit Innenabstand

Zeige oben den Titel "Meine App"
Zeige darunter eine kurze Beschreibung

Zeige eine Zeile mit zwei Buttons:
  Button "Start"
  Button "Reset"

Wenn "Start" gedrueckt wird:
  Gib aus: "Start gedrueckt"

Wenn "Reset" gedrueckt wird:
  Gib aus: "Reset gedrueckt"

Zeige darunter einen Hilfe-Link

Wenn Hilfe-Link gedrueckt wird:
  Gib aus: "Hilfe oeffnen"
Sequenz

Titel, Beschreibung, Buttonzeile und Hilfe-Link erscheinen nacheinander.

Row

Start und Reset stehen nebeneinander.

Aktionen

Jeder Button braucht eine klare onPressed-Funktion.

Link

Der Hilfe-Link ist ein klickbares Widget, zum Beispiel TextButton.

9. Moeglicher Flutter-Code

Dieser Code ist eine Uebersetzung der UI-Planung. Lies ihn von aussen nach innen: Scaffold, dann Padding, dann Column, dann die einzelnen Kinder. 

Scaffold(
  appBar: AppBar(title: const Text('Widget Uebung')),
  body: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Meine App'),
        const SizedBox(height: 8),
        const Text('Eine kleine Startseite.'),
        const SizedBox(height: 16),
        Row(
          children: [
            ElevatedButton(
              onPressed: () => print('Start gedrueckt'),
              child: const Text('Start'),
            ),
            const SizedBox(width: 12),
            OutlinedButton(
              onPressed: () => print('Reset gedrueckt'),
              child: const Text('Reset'),
            ),
          ],
        ),
        TextButton(
          onPressed: () => print('Hilfe oeffnen'),
          child: const Text('Hilfe'),
        ),
      ],
    ),
  ),
)

10. Uebungen

  1. Zeichne den Widget-Baum der Beispielseite auf Papier.
  2. Baue eine eigene Column mit Titel, Text und Button.
  3. Baue eine Row mit drei Buttons nebeneinander.
  4. Ersetze einen Button durch einen TextButton als Hilfe-Link.
  5. Schreibe fuer jede Aktion zuerst einen kurzen Planungssatz.
  6. Erklaere, warum Padding und SizedBox das Layout lesbarer machen.
Weiter zu Widget-Details