Jerarquía visual de la pantalla: qué opciones caben en home , body y child (y diferencia con children )

Al estructurar la interfaz de una aplicación Flutter, es habitual encontrarse con propiedades como home:, body: y child: (así como children:). Cada una de ellas ocupa una posición específica dentro del árbol visual de widgets y responde a un propósito arquitectónico determinado.

A nivel de tipos en Dart, todas estas propiedades esperan recibir instancias de Widget (la unidad constructiva básica de Flutter). Sin embargo, su cometido dentro de la jerarquía es bien diferente:

# Esquema de la jerarquía visual en el árbol de widgets:
MaterialApp (home:) # Raíz visual: recibe la pantalla completa (Scaffold o vista de inicio)
  └── Scaffold (body:) # Lienzo principal: define el área de trabajo de la pantalla
        └── Center / Container (child:) # Contenedor de subárbol (un único widget hijo)

1. La propiedad home: (en MaterialApp)

• Propósito: Es la pantalla inicial o punto de entrada visual de la aplicación.
• Qué se suele ubicar aquí: Casi siempre un widget que representa una pantalla completa con su estructura base. Lo estándar es asignar un Scaffold o directamente una clase personalizada que retorne un Scaffold (por ejemplo, home: const LoginPage() o home: const HomeScreen()).

2. La propiedad body: (en Scaffold)

• Propósito: Es el lienzo o zona de trabajo principal de la pantalla, situada bajo la barra de aplicación (appBar) y sobre la barra de navegación inferior (bottomNavigationBar).
• Opciones más habituales para body:
  • Un elemento centrado: Center(...)
  • Distribución vertical de elementos: Column(...)
  • Distribución horizontal de elementos: Row(...)
  • Lista con desplazamiento (scroll): ListView(...)
  • Cuadrícula bidimensional: GridView(...)
  • Elementos superpuestos en capas (eje Z): Stack(...)
  • Contenedor decorado con márgenes o bordes: Container(...)

3. La propiedad child: (en widgets de un solo hijo)

Gran parte de los widgets de diseño y decoración en Flutter están diseñados para envolver o posicionar a un único elemento (como Center, Container, Padding, SizedBox, Card o botones). Todos ellos exponen la propiedad child:.

• Qué se puede colocar: Cualquier widget del catálogo de Flutter:
  • Componentes simples: Text('Hola'), Icon(Icons.star), Image.network(...).
  • Botones y controles: ElevatedButton(...), IconButton(...).
  • Contenedores anidados: Puedes colocar dentro del child de un Center una Column, que a su vez contiene múltiples widgets, permitiendo construir layouts sofisticados.

Diferencia fundamental: child vs. children

• Los widgets que alojan un único elemento usan la propiedad child: Widget (por ejemplo, Center, Padding, Container, SizedBox).
• Los widgets que alojan múltiples elementos usan la propiedad children: <Widget>[ ... ] mediante una lista (por ejemplo, Column, Row, ListView, Stack, Wrap).