Flutter Layout-Grundlagen
Layout ist ein Kernkonzept in der Flutter-UI-Entwicklung.
In diesem Abschnitt werden die am häufigsten verwendeten Layout-Widgets vorgestellt, darunter Row, Column, Stack, Flex usw.
Überblick über Layout-Widgets
Flutter bietet eine Vielzahl von Layout-Widgets, die unterschiedliche Anforderungen an das Oberflächendesign erfüllen können.
| Widget | Zweck |
|---|---|
| Row | Untergeordnete Widgets horizontal anordnen |
| Column | Untergeordnete Widgets vertikal anordnen |
| Stapel | Untergeordnete Widgets von Stack |
| Flex | Flexibles lineares Layout (Basisklasse für Row/Column) |
| GridView | Grid-Layout |
| ListView | Listenlayout |
Row - Horizontales Layout
Row wird verwendet, um untergeordnete Widgets horizontal anzuordnen.
Beispiel: Grundlegende Verwendung von Row
// Drei Symbole horizontal anordnen
Row(
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)
// Row mit Abstand
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Ausrichtung der Hauptachse
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)
Row(
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)
// Row mit Abstand
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Ausrichtung der Hauptachse
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)
mainAxisAlignment - Ausrichtung der Hauptachse
| Wert | Beschreibung |
|---|---|
| MainAxisAlignment.start | Linksbündig (Standard) |
| MainAxisAlignment.center | Zentriert ausrichten |
| MainAxisAlignment.end | Rechtsbündig |
| MainAxisAlignment.spaceBetween | Abstand dazwischen, gleichmäßiger Abstand zwischen Elementen |
| MainAxisAlignment.spaceEvenly | Gleichmäßiger Abstand zwischen Elementen und an beiden Enden |
| MainAxisAlignment.spaceAround | Gleichmäßiger Abstand zwischen Elementen, größer als der Abstand an den Enden |
Column – vertikales Layout
Column wird verwendet, um untergeordnete Widgets vertikal anzuordnen.
Beispiel: Grundlegende Verwendung von Column
// Drei Texte vertikal anordnen
Column(
children: [
Text('Erste Zeile', style: TextStyle(fontSize: 20)),
Text('Zweite Zeile', style: TextStyle(fontSize: 20)),
Text('Dritte Zeile', style: TextStyle(fontSize: 20)),
],
)
// Column mit Abständen und Ausrichtung
Column(
mainAxisAlignment: MainAxisAlignment.center, // Vertikal zentriert
crossAxisAlignment: CrossAxisAlignment.start, // Horizontal links ausgerichtet
children: [
Text('Titel', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Text('Inhalt Inhalt Inhalt'),
const SizedBox(height: 8),
Text('Untere Beschreibung'),
],
)
Column(
children: [
Text('Erste Zeile', style: TextStyle(fontSize: 20)),
Text('Zweite Zeile', style: TextStyle(fontSize: 20)),
Text('Dritte Zeile', style: TextStyle(fontSize: 20)),
],
)
// Column mit Abständen und Ausrichtung
Column(
mainAxisAlignment: MainAxisAlignment.center, // Vertikal zentriert
crossAxisAlignment: CrossAxisAlignment.start, // Horizontal links ausgerichtet
children: [
Text('Titel', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Text('Inhalt Inhalt Inhalt'),
const SizedBox(height: 8),
Text('Untere Beschreibung'),
],
)
crossAxisAlignment - Cross-Axis-Ausrichtung
| Wert | Beschreibung |
|---|---|
| CrossAxisAlignment.start | Oben/links ausrichten |
| CrossAxisAlignment.center | Zentriert ausrichten |
| CrossAxisAlignment.end | Unten/rechts ausrichten |
| CrossAxisAlignment.stretch | Strecken, um den übergeordneten Container zu füllen |
Expanded und Flexible
Expanded und Flexible werden verwendet, damit untergeordnete Widgets den verbleibenden Platz ausfüllen.
Beispiel: Verwendung von Expanded
// Feste Breite + adaptive Breite
Row(
children: [
// Feste Breite 100
Container(width: 100, height: 50, color: Colors.red),
// Restlichen Platz einnehmen
Expanded(
child: Container(height: 50, color: Colors.⟦0⟧),
),
// Feste Breite 50
Container(width: 50, height: 50, color: Colors.blue),
],
)
// Verteilungsverhältnis
Row(
children: [
// 1 Teil einnehmen
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.red),
),
// 2 Teile belegen
Expanded(
flex: 2,
child: Container(height: 50, color: Colors.⟦0⟧),
),
// 1 Teil einnehmen
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.blue),
),
],
)
Row(
children: [
// Feste Breite 100
Container(width: 100, height: 50, color: Colors.red),
// Restlichen Platz einnehmen
Expanded(
child: Container(height: 50, color: Colors.⟦0⟧),
),
// Feste Breite 50
Container(width: 50, height: 50, color: Colors.blue),
],
)
// Verteilungsverhältnis
Row(
children: [
// 1 Teil einnehmen
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.red),
),
// 2 Teile belegen
Expanded(
flex: 2,
child: Container(height: 50, color: Colors.⟦0⟧),
),
// 1 Teil einnehmen
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.blue),
),
],
)
Stack – Gestapeltes Layout
Stack wird verwendet, um untergeordnete Widgets übereinanderzustapeln; häufig für Effekte wie schwebende Elemente und Ebenenüberlagerungen genutzt.
Beispiel: Verwendung von Stack
// Einfacher Stack
Stapel(
children: [
// Untere Ebene: Hintergrundbild
Container(
width: 200,
height: 200,
color: Colors.blue,
),
// Mittlere Ebene: halbtransparente Überlagerung
Container(
width: 180,
height: 180,
color: Colors.white.withOpacity(0.5),
),
// Obere Ebene: Text
const Center(
child: Text(
'Overlay-Inhalt',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
],
)
// Stack mit Positionierung
Stapel(
children: [
Container(color: Colors.grey[300]),
// In der oberen rechten Ecke positioniert
Positioned(
right: 10,
top: 10,
child: Icon(Icons.close, color: Colors.red),
),
// In der unteren linken Ecke positioniert
Positioned(
left: 10,
bottom: 10,
child: Text('Text unten links'),
),
],
)
Stapel(
children: [
// Untere Ebene: Hintergrundbild
Container(
width: 200,
height: 200,
color: Colors.blue,
),
// Mittlere Ebene: halbtransparente Überlagerung
Container(
width: 180,
height: 180,
color: Colors.white.withOpacity(0.5),
),
// Obere Ebene: Text
const Center(
child: Text(
'Overlay-Inhalt',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
],
)
// Stack mit Positionierung
Stapel(
children: [
Container(color: Colors.grey[300]),
// In der oberen rechten Ecke positioniert
Positioned(
right: 10,
top: 10,
child: Icon(Icons.close, color: Colors.red),
),
// In der unteren linken Ecke positioniert
Positioned(
left: 10,
bottom: 10,
child: Text('Text unten links'),
),
],
)
Padding und Margin
Verwende Padding und Margin, um den Innenabstand und Außenabstand von Elementen zu steuern.
Beispiel: Padding und Margin
// Padding verwenden, um padding zu setzen
Innenabstand(
padding: const EdgeInsets.all(16.0), // Alle vier Seiten 16 Pixel
child: Text('Text mit Padding'),
)
// Jede Seite einzeln festlegen
Innenabstand(
padding: EdgeInsets.only(
left: 10,
right: 20,
top: 5,
bottom: 5,
),
child: Text('Benutzerdefiniertes Padding'),
)
// Verwende EdgeInsets.symmetric für symmetrisches Padding
Innenabstand(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text('Horizontal 16, vertikal 8'),
)
// Container, der Margin und Padding kombiniert
Container(
margin: const EdgeInsets.all(10), // Äußerer Rand
padding: const EdgeInsets.all(16), // Innenabstand
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.circular(8),
),
child: Text('Container-Inhalt'),
)
Innenabstand(
padding: const EdgeInsets.all(16.0), // Alle vier Seiten 16 Pixel
child: Text('Text mit Padding'),
)
// Jede Seite einzeln festlegen
Innenabstand(
padding: EdgeInsets.only(
left: 10,
right: 20,
top: 5,
bottom: 5,
),
child: Text('Benutzerdefiniertes Padding'),
)
// Verwende EdgeInsets.symmetric für symmetrisches Padding
Innenabstand(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text('Horizontal 16, vertikal 8'),
)
// Container, der Margin und Padding kombiniert
Container(
margin: const EdgeInsets.all(10), // Äußerer Rand
padding: const EdgeInsets.all(16), // Innenabstand
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.circular(8),
),
child: Text('Container-Inhalt'),
)
Scaffold und AppBar
Scaffold bietet die grundlegende Seitenstruktur von Material Design, AppBar ist die obere App-Leiste.
Beispiel: Grundlegende Scaffold-Struktur
// Material Design Seiten-Scaffold
Scaffold(
// Obere App-Leiste
appBar: AppBar(
title: const Text('My App'),
backgroundColor: Colors.blue,
elevation: 4, // Schattentiefe
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {},
),
],
),
// Seitenkörper
body: const Center(
child: Text('Inhalt des Seitenkörpers'),
),
// Schwebende Aktionsschaltfläche
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
// Untere Navigationsleiste
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Startseite'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Suche'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Meine'),
],
),
)
Scaffold(
// Obere App-Leiste
appBar: AppBar(
title: const Text('My App'),
backgroundColor: Colors.blue,
elevation: 4, // Schattentiefe
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {},
),
],
),
// Seitenkörper
body: const Center(
child: Text('Inhalt des Seitenkörpers'),
),
// Schwebende Aktionsschaltfläche
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
// Untere Navigationsleiste
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Startseite'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Suche'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Meine'),
],
),
)