Der Widget-Baum

Teil des Abschnitts Deine erste App der Flutter-Journey von Coddy. Lektion 3 von 32.

Widgets befinden sich innerhalb anderer Widgets. Ein Widget, das ein anderes enthält, übergibt es an child:, wie hier an Center:

Center(
  child: Text('Hello'),
)

Center zeichnet selbst nichts. Es nimmt sein untergeordnetes Widget und platziert es in der Mitte des verfügbaren Platzes. Ohne dieses Widget steht der Text oben links.

Widgets innerhalb von Widgets innerhalb von Widgets bilden einen Widget-Baum. In deiner App besteht der Baum aus MaterialApp, dann Scaffold und schließlich aus allem, was du in dessen body: einfügst. Das untergeordnete Widget jedes Widgets steht in dessen Klammern, sodass die Klammern den Baum zeigen. Die Kommas am Ende jeder Zeile sorgen für Übersichtlichkeit.

Aufgabe

Einfach

Der Text befindet sich ganz oben links. Umschließe ihn mit einem Center, damit er in der Mitte des Bildschirms steht:

Ersetze body: Text('Right in the middle'), durch ein Center, dessen child: dieses Text ist

Probier es selbst

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}