Drzewo widgetów

Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 3 z 32.

Widżety umieszcza się wewnątrz innych widżetów. Widżet, który zawiera inny widżet, przekazuje go do child:, tak jak tutaj Center:

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

Sam Center niczego nie rysuje. Pobiera swoje dziecko i umieszcza je na środku dostępnej przestrzeni. Bez niego tekst znajduje się w lewym górnym rogu.

Widżety zagnieżdżone w innych widżetach tworzą drzewo widżetów. W Twojej aplikacji drzewo składa się z MaterialApp, następnie Scaffold, a potem z tego, co umieścisz w jego body:. Dziecko każdego widżetu zapisuje się wewnątrz jego nawiasów, więc nawiasy pokazują drzewo. Przecinki na końcu każdej linii utrzymują porządek.

Wyzwanie

Łatwy

Tekst jest przyklejony do lewego górnego rogu. Owiń go w Center, aby znalazł się na środku ekranu:

zastąp body: Text('Right in the middle'), elementem Center, którego child: będzie tym elementem Text

Spróbuj swoich sił

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'),
      ),
    );
  }
}