Layout: Row, Column, Padding, Expanded, SizedBox

Ordne mehrere Widgets auf dem Bildschirm an, mit Spalten, Zeilen, Abständen und Platzverteilung.

9 Min. · 3 Fragen

Ein echter Bildschirm zeigt selten ein einziges Widget: Du musst sie anordnen. Das ist die Aufgabe der Layout-Widgets. Column stapelt seine Kinder vertikal, von oben nach unten; Row reiht sie horizontal auf, von links nach rechts. Da sie mehrere Kinder akzeptieren, heißt der Parameter nicht mehr child, sondern children, und er erhält eine Liste: Widgets zwischen eckigen Klammern [ ], getrennt durch Kommas.

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Flutter Developer"),
    ],
  );
}

Row funktioniert genau gleich, nur horizontal. Seine Hauptachse ist die Breite: Der Parameter mainAxisAlignment bestimmt, wie die Kinder entlang dieser Achse verteilt werden (center, um sie in der Mitte zu gruppieren, spaceBetween, um sie so weit wie möglich auseinanderzuziehen...). Und um einfach einen leeren Abstand zwischen zwei Widgets einzuschieben, verwendest du SizedBox: eine unsichtbare Kiste, deren Breite (width) oder Höhe (height) du festlegst.

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4.8 out of 5"),
    ],
  );
}

Padding fügt Platz rund um sein Kind hinzu, damit der Inhalt nicht an den Rändern klebt. Die Menge des Platzes wird mit EdgeInsets beschrieben: EdgeInsets.all(16) setzt 16 Pixel auf allen vier Seiten, EdgeInsets.only(left: 8) nur links und EdgeInsets.symmetric(horizontal: 12) gleichzeitig links und rechts.

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("A text with some room around it"),
  );
}

Ein letztes Werkzeug: Expanded. Zwischen den Kindern einer Row oder einer Column platziert, fordert es sein Kind auf, den gesamten verbleibenden Platz einzunehmen. Im Beispiel unten behält die graue Kiste ihre 80 Pixel Breite und die petrolfarbene Kiste dehnt sich, um den Rest der Breite zu füllen, egal wie groß der Bildschirm ist.

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. In welche Richtung ordnet eine Column ihre Kinder an?
   • Horizontal, von links nach rechts
   • Vertikal, von oben nach unten
   • Im Kreis, rund um die Mitte des Bildschirms
2. Wozu dient das Widget Expanded?
   • Damit sein Kind den gesamten verbleibenden Platz in einer Row oder einer Column einnimmt
   • Um die Schrift aller Texte auf dem Bildschirm zu vergrößern
   • Um in ein Bild zu zoomen, wenn du es berührst
3. Wie fügst du in einer Row einen leeren Abstand von 8 Pixeln zwischen zwei Widgets ein?
   • Mit einer SizedBox(width: 8) zwischen den beiden
   • Indem du achtmal die Leertaste drückst
   • Mit einem Expanded(width: 8)