Contenido del curso
Widgets en Flutter
Manejo de Recursos y Formularios
Navegación y APIs
Gestión de Estados
- 15

ListView.builder con FutureBuilder en Flutter
08:49 min - 16

Estados de carga y errores en Flutter
07:03 min - 17

Creación de modelos de datos en Flutter con Dart
09:43 min - 18

Uso de Provider para Gestión de Estado en Flutter
14:06 min - 19

"Gestión de Favoritos en Aplicaciones con Stateful Widgets"
30:46 min - 20

Detalles de Recetas en Flutter: Implementación y Visualización
05:08 min
Experiencia de Usuario
Publicación de Apps
Cómo depurar favoritos con Provider en Flutter
Resumen
Construir una app de recetas en Flutter implica revisar cada pantalla con detalle: el listado, el detalle y la sección de favoritos. Aquí verás cómo depurar el flujo completo de una aplicación con Provider, identificar el error que impide mostrar la lista de favoritos y aplicar buenas prácticas de debugging paso a paso.
¿Cómo se conecta el detalle de la receta con el Provider?
La pantalla de detalle recibe la información de la receta y la entrega al provider, que se encarga de manejar el estado global de la aplicación. Si la lista de widgets llega correctamente al provider, el problema no está en esa capa.
Un detalle visual importante: en la tarjeta de detalle conviene mostrar el autor debajo del nombre de la receta, no repetir el título. Para lograrlo, basta con cambiar la propiedad recipesDate por author y ubicar el name arriba y el autor abajo.
¿Qué hace un Provider en Flutter? Es un patrón que centraliza el estado de la app y permite que distintas pantallas lean o modifiquen los mismos datos sin pasarlos manualmente entre widgets.
¿Por qué la pantalla de favoritos no carga las recetas?
Cuando el home y el detalle funcionan, pero favoritos aparece vacío, el error suele estar en el builder de la pantalla de favoritos. La técnica recomendada es comentar el código que arma la tarjeta y reemplazarlo por un Center simple para confirmar si el widget se está construyendo.
Al hacer hot reload y añadir una receta, si nada aparece en pantalla, el problema es que falta el return antes del widget. Sin esa instrucción, el método no devuelve nada al árbol de widgets y Flutter no pinta la interfaz.
¿Cómo confirmar que la receta sí se está agregando?
Una técnica útil de depuración es retornar un Text con la información de la receta convertida a string:
dart return Text('${favoriteRecipes[index].toString()}');
Con esto, cada vez que marques o desmarques el corazón, verás cómo la lista crece o se reduce. Es una forma rápida de validar que el provider está actualizando el estado antes de preocuparte por el diseño visual.
¿Cuál es el error más común al construir un ListView en Flutter? Olvidar el
returndentro delitemBuilder. Sin esa palabra clave, el método no entrega el widget y la lista aparece vacía aunque los datos existan.
¿Cómo restaurar la card de favoritos una vez identificado el error?
Después de confirmar que los datos llegan, descomenta el código original de la Card y agrega el return que faltaba. Con ese ajuste, las tarjetas de recetas favoritas se renderizan correctamente y el botón de corazón funciona en ambos sentidos: agrega y elimina.
Este flujo de depuración se puede resumir en tres pasos:
- Comentar el widget complejo y reemplazarlo por uno simple para aislar el error.
- Imprimir la data en pantalla con un
Textpara validar el estado. - Restaurar el código original asegurándote de incluir el
returnen cadabuilder.
¿Qué puedes personalizar en la card de favoritos?
Una vez que la lógica funciona, el siguiente paso es el diseño. Puedes enriquecer cada tarjeta con:
- Imágenes de la receta usando el widget
Image. - Bordes redondeados con
BorderRadiusdentro de unContainer. - Colores personalizados según el tipo de receta o el estado del favorito.
¿Te animas a personalizar tu card con todas las propiedades que has aprendido? Comparte en los comentarios cómo quedó tu diseño final.