El árbol de widgets

Parte de la sección Tu primera app del Journey de Flutter de Coddy. Lección 3 de 32.

Los widgets van dentro de otros widgets. Un widget que contiene otro se lo pasa a través de child:, como este Center:

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

Center no dibuja nada por sí mismo. Toma su elemento hijo y lo coloca en el centro del espacio que tiene. Sin él, el texto queda en la esquina superior izquierda.

Los widgets dentro de otros widgets forman un árbol de widgets. En tu aplicación, el árbol es MaterialApp, después Scaffold y luego lo que pongas en su body:. El elemento hijo de cada widget se escribe dentro de sus paréntesis, así que los paréntesis muestran el árbol. Las comas al final de cada línea mantienen todo ordenado.

Desafío

Fácil

El texto está atascado en la esquina superior izquierda. Envuélvelo en un Center para que quede en el centro de la pantalla:

reemplaza body: Text('Right in the middle'), por un Center cuyo child: sea ese Text

Pruébalo tú mismo

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