Contenido del curso

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 return dentro del itemBuilder. 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 Text para validar el estado.
  • Restaurar el código original asegurándote de incluir el return en cada builder.

¿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 BorderRadius dentro de un Container.
  • 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.