Alles ist ein Widget: Text, Container und Icon

Verstehe die große Idee von Flutter, den Widget-Baum, anhand von drei einfachen Bausteinen: Text, Container und Icon.

8 Min. · 3 Fragen

In Flutter ist alles ein Widget. Ein Widget ist ein Baustein der Oberfläche: die Beschreibung eines Teils dessen, was auf dem Bildschirm erscheint. Ein Text ist ein Widget, ein Symbol ist ein Widget, ein Abstand ist ein Widget... und der ganze Bildschirm ebenfalls! Um eine Oberfläche zu bauen, verschachtelst du Widgets ineinander, wie Matrjoschka-Puppen. Zusammen bilden sie den Widget-Baum: Jedes Widget hat ein Elternteil (das, was es enthält) und manchmal Kinder (die, die es enthält). Schauen wir uns unser minimales Programm noch einmal an und betrachten seinen Baum.

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(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Von oben nach unten: MaterialApp konfiguriert die ganze App (Theme, Navigation) nach Material 3, der visuellen Sprache von Google. Scaffold (wörtlich "Gerüst") liefert die Struktur eines Bildschirms: Hintergrund, eine optionale Titelleiste... Center zentriert sein Kind und Text zeigt Text an. Der Parameter style von Text erhält ein TextStyle, das die Größe (fontSize), die Farbe oder die Stärke der Zeichen festlegt. Jetzt entdecken wir Container, die Allzweckkiste: ein Rechteck, dessen Größe, Farbe und Inhalt du steuerst.

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

Die Funktion buildYellowBox gibt ein Widget zurück: Deine Oberfläche auf diese Weise in kleine benannte Teile zu zerlegen, ist eine sehr verbreitete Praxis. Dieser Container ist 200 Pixel breit, 100 hoch, färbt sich dank des Farbkatalogs Colors bernsteingelb und enthält einen zentrierten Text. Dritter einfacher Baustein: Icon, das ein Piktogramm anzeigt. Flutter liefert Hunderte fertiger Symbole im Katalog Icons mit: einen Stern, ein Herz, ein Haus...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

Merke dir die Logik des Baums: Wenn ein Widget ein einziges Kind akzeptiert, heißt der Parameter child (so ist es bei Center und Container). In unserem ersten Beispiel ist Scaffold das Elternteil von Center, das wiederum das Elternteil von Text ist. Flutter zeichnet den Bildschirm, indem es diesen Baum von oben nach unten durchläuft. Wenn du sagen kannst, wer das Elternteil von wem ist, kannst du jede Flutter-Oberfläche lesen.

Wissenscheck

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

1. Was ist in Flutter ein Widget?
   • Ein Baustein der Oberfläche, der einen Teil des Bildschirms beschreibt
   • Eine Konfigurationsdatei des Projekts
   • Eine im Handy eingebaute Datenbank
2. Welches Widget verwendest du, um ein Piktogramm wie einen Stern anzuzeigen?
   • Text
   • Container
   • Icon
3. Welches Widget ist bei Center(child: Text("Hi")) das Elternteil?
   • Text, weil es zuletzt geschrieben steht
   • Center, weil es Text über seinen Parameter child enthält
   • Keins von beiden: Die zwei Widgets sind unabhängig