Widgets en Flutter: cómo se construye una pantalla

Antes de instalar nada, Thomas abre DartPad, un editor online que permite escribir código Dart y ver la app funcionando al momento. Carga el ejemplo del contador: un botón que suma uno cada vez que lo pulsas. Con un pequeño esquema dibuja la estructura de esa pantalla, lo que en inglés se llama layout (disposición).

• Scaffold: el widget que representa una pantalla completa.
• AppBar: la barra de la parte superior, con su título.
• Body: el cuerpo de la pantalla, donde va el contenido.

Ver la respuesta en el vídeo · 19:44

Cada widget puede tener hijos. El Scaffold tiene tres: el AppBar, un Center en el body y un FloatingActionButton, el botón flotante. Center coloca en el centro todo lo que lleva dentro. Si un widget solo admite un hijo, la propiedad se llama child; si admite varios, children. Thomas propone un ejercicio sencillo: decir quién es el padre de cada widget y quiénes son sus hijos.

Ver la respuesta en el vídeo · 25:00

Para poner dos textos uno encima del otro se usa Column, una columna. Si la cambias por Row, los elementos se colocan uno al lado del otro. Con la propiedad de alineación del eje principal decides si van al principio, en el centro o al final. Si los elementos no caben, Flutter avisa con un error de desbordamiento; en el ejemplo se soluciona con un estilo de texto más pequeño.

• Column: elementos apilados de arriba abajo.
• Row: elementos en fila, de izquierda a derecha.
• Start, center y end cambian la alineación.

Ver la respuesta en el vídeo · 27:45

Para terminar, Thomas enseña la documentación oficial de Flutter, que tiene una versión traducida al español, y su catálogo de widgets. En el apartado de layout están los que ya has visto y otros para practicar, como Stack, que pone un elemento encima de otro, o las cuadrículas. Su consejo es jugar con el ejemplo: añadir textos, cambiar columnas por filas y ver qué pasa.

Ver la respuesta en el vídeo · 45:55