L’albero dei widget

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 3 di 32.

I widget sono contenuti in altri widget. Un widget che ne contiene un altro lo assegna a child:, così come Center:

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

Center non disegna nulla da solo. Prende il widget figlio e lo posiziona al centro dello spazio a sua disposizione. Senza di esso, il testo si trova nell'angolo in alto a sinistra.

I widget contenuti in altri widget, a loro volta contenuti in altri widget, formano un albero di widget. Nella tua app l'albero è composto da MaterialApp, poi Scaffold, poi da qualunque cosa tu inserisca nel suo body:. Il widget figlio di ciascun widget è scritto tra parentesi, quindi le parentesi mostrano l'albero. Le virgole alla fine di ogni riga mantengono il codice ordinato.

Sfida

Facile

Il testo è bloccato nell’angolo in alto a sinistra. Racchiudilo in un Center in modo che si trovi al centro dello schermo:

sostituisci body: Text('Right in the middle'), con un Center il cui child: sia quel Text

Provalo tu

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