Grundlegende Layout-Widgets
Beherrschen Sie wichtige Layout-Widgets wie Row, Column, Container und Stack, um strukturierte und responsive Benutzeroberflächen zu erstellen.
Grundlegende Layout-Widgets ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Layouts Matter
In Flutter, everything is a widget! To build complex and beautiful user interfaces, you need to arrange these widgets on the screen.
Layout widgets are special widgets designed to help you organize other widgets, defining their size, position, and how they interact with each other.
Meet the Container
The Container widget is one of the most versatile layout widgets. Think of it as a customizable box that can hold a single child widget.
You can use it to:
- Add padding or margins
- Set background colors or decorations
- Define specific width and height
- Transform its position or rotation
Simple Colored Box
Let's create a basic Container with a child Text widget. Notice how we set its color and padding.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Horizontal with Row
When you need to arrange multiple widgets side-by-side horizontally, the Row widget is your go-to. It takes a list of widgets as its children.
Row automatically tries to fit its children along the horizontal axis, and you can control their alignment within the row.
Row of Buttons
Here's how you can place three buttons next to each other using a Row. We'll add some spacing between them.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Vertical with Column
Just as Row arranges widgets horizontally, the Column widget arranges them vertically, one below the other.
It also takes a list of children and lets you control their vertical alignment.
Stacked Text Fields
Let's create a simple login-like form using a Column to stack two TextFields and a button vertically.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}Aligning Children
Both Row and Column use two important properties for alignment:
mainAxisAlignment: How children are positioned along the primary axis (horizontal forRow, vertical forColumn). Examples:start,center,end,spaceAround.crossAxisAlignment: How children are positioned along the perpendicular axis (vertical forRow, horizontal forColumn). Examples:start,center,end,stretch.
These give you fine control over your layouts!
Overlapping with Stack
Sometimes you need to place widgets on top of each other, like text over an image. That's where the Stack widget comes in.
Stack allows you to layer multiple children widgets. You can control their exact position within the stack using the Positioned widget.
Image with Text Overlay
Let's put some text directly on top of an image using a Stack. We'll use Positioned to place the text precisely.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}Layout Challenge
Which of the following widgets are primarily used for arranging multiple children widgets in a single direction (either horizontally or vertically)?
Layouts Mastered!
Great job! You've now mastered the fundamental layout widgets in Flutter:
Container: A versatile box for single children, offering padding, margin, color, and size control.Row: Arranges multiple children horizontally.Column: Arranges multiple children vertically.Stack: Layers children on top of each other, often used withPositioned.
Understanding these is key to building any Flutter UI!
Lerne Dart mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „Grundlegende Layout-Widgets“ kostenlos?
Ja — der vollständige Text von „Grundlegende Layout-Widgets“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grundlegende Layout-Widgets“?
Beherrschen Sie wichtige Layout-Widgets wie Row, Column, Container und Stack, um strukturierte und responsive Benutzeroberflächen zu erstellen. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Flutter Mobile Development zu starten?
Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Grundlegende Layout-Widgets“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?
Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Stateless- und Stateful-Widgets
- Grundlegende Layout-Widgets
- Interaktive Elemente der Benutzeroberfläche
- Scrollbare Listen mit ListView erstellen