Construir una pantalla de detalles que muestre información dinámica es uno de los pasos más importantes en cualquier aplicación móvil. En Flutter, combinar widgets como Scaffold, Column y Image.network permite crear interfaces claras y funcionales para presentar datos provenientes de una API o backend.
¿Cómo agregar el body al Scaffold para mostrar contenido?
Una vez que la barra superior está lista, el siguiente paso es definir el body del Scaffold [0:15]. Sin este widget, la pantalla permanece vacía debajo de la barra de navegación.
Para centrar el contenido y darle aire visual, se envuelve todo dentro de un Padding con un valor aproximado de dieciocho [0:25]. Este widget agrega espacio entre los bordes de la pantalla y el contenido principal, mejorando la legibilidad.
Dentro del Padding se coloca un child que contiene una Column [0:38]. La Column es el widget ideal cuando necesitas apilar elementos de forma vertical, ya que organiza sus children uno debajo del otro en orden secuencial.
¿Qué widgets se usan para mostrar imagen, nombre y autor?
La estructura de la pantalla de detalles sigue un orden lógico:
- Image.network: recibe la URL de la imagen desde la data de la widget con
widget.data.imagen [0:55].
- Text para el nombre: accede a
widget.data.nombre para mostrar el título de la receta [1:08].
- Text para el autor: utiliza string interpolation con el signo de pesos y corchetes para concatenar la palabra "by" con la variable del autor [1:20].
La interpolación de strings en Dart funciona colocando el símbolo $ seguido de la variable. Cuando se necesita acceder a una propiedad de un objeto, se encierra la expresión completa entre llaves: ${widget.data.autor}.
¿Cómo iterar los pasos de una receta con un for?
Los pasos de la receta llegan como una lista, por lo que se requiere un for dentro de los children de la Column [1:35]. En Dart, es posible usar un collection for directamente dentro de una lista de widgets.
Cada elemento de la iteración representa un step individual obtenido de widget.data.steps [1:45]. Para cada paso se genera un widget Text que muestra su contenido usando interpolación de strings: ${step.titulo}.
¿Cómo agregar espaciado entre elementos de una Column?
Para separar visualmente cada elemento se utiliza SizedBox con la propiedad height [2:10]. Un valor de ocho píxeles entre cada sección proporciona un espaciado limpio sin saturar la interfaz. Como se trabaja dentro de una Column, la propiedad relevante es height y no width.
¿Cómo se ve el resultado final en la aplicación?
Al guardar los cambios y ejecutar la aplicación, la pantalla de detalles muestra:
- La imagen de la receta cargada desde la red.
- El nombre y el autor de la receta.
- Todos los pasos listados de forma dinámica.
Al acceder a diferentes recetas, la información cambia automáticamente gracias a que los datos se obtienen de forma dinámica desde la widget que los recibe [2:25]. Esto significa que la misma pantalla sirve para cualquier receta sin necesidad de duplicar código.
Para practicar con datos reales, puedes conectar tu aplicación a cualquier API o backend. Una opción recomendada es la Fake Store de Platzi [2:40], que simula respuestas de un servidor y te permite probar sin necesidad de configurar infraestructura propia.
¿Ya implementaste tu pantalla de detalles? Comparte en los comentarios qué API estás usando para alimentar tu aplicación.
