Crear un widget reutilizable en Flutter te permite construir listas dinámicas de tarjetas sin repetir código, algo esencial cuando trabajas en una app de recetas o cualquier interfaz que muestre información en bloques. Aquí aprendes a estructurar un RecipesCard, aplicar estilos y organizar el contenido para que tu pantalla luzca profesional y mantenible.

¿Cómo construir un widget RecipesCard reutilizable?

La idea central es tomar el container que ya tiene la estructura de tu tarjeta y encapsularlo dentro de un nuevo widget personalizado. A ese widget lo llamas RecipesCard y le pasas el BuildContext, que mantiene la herencia del árbol de widgets de tu app.

Una vez creado, puedes invocarlo tantas veces como quieras dentro de tu home screen. Esto convierte tu pantalla en algo mucho más reutilizable y te prepara para llenar las tarjetas con información real más adelante.

¿Qué es BuildContext en Flutter? Es un objeto que guarda la ubicación de un widget dentro del árbol de widgets. Lo necesitas para que tu RecipesCard mantenga la jerarquía y acceda a temas, estilos o datos del widget padre.

¿Cómo mostrar varias tarjetas en una columna?

Dentro de una column, puedes pasar una lista de widgets. Ahí colocas tu RecipesCard las veces que necesites. Al guardar, verás múltiples tarjetas en pantalla, todas reutilizando la misma estructura.

Este patrón es la base para luego conectar datos dinámicos: en lugar de repetir el widget manualmente, lo iterarías sobre una lista de recetas reales.

¿Cómo aplicar padding y espaciado entre tarjetas?

Cuando las tarjetas quedan pegadas entre sí o muy cerca de los bordes, la solución es agregar padding. Con Alt+Enter envuelves el widget en un Padding, que por defecto trae un valor de 8.0 en todos los lados.

Si quieres más control, usas la propiedad only, que te permite definir valores exactos para cada lado:

• left: espaciado en el borde izquierdo.
• top: espaciado superior.
• right: espaciado derecho.
• bottom: espaciado inferior.

Así ajustas el aire entre tarjetas y los márgenes de la pantalla sin afectar el contenido interno.

¿Cómo alinear widgets dentro de una columna?

Para organizar los widgets verticalmente dentro de una column, usas MainAxisAlignment. Si lo configuras en .center, todo el contenido queda centrado en el eje principal.

Para controlar la posición horizontal, usas CrossAxisAlignment. Si lo dejas al inicio, los textos se alinean a la izquierda. Esta combinación te da control total sobre cómo se distribuye la información dentro de cada tarjeta.

Después de alinear, agregas pequeños bloques de SizedBox para separar el título, el autor y la receta. Como estás dentro de una column, el espaciado se controla con height, no con width. Cuatro píxeles entre el título y el autor suelen ser suficientes para que respire el contenido.

¿Cómo aplicar estilos de texto y fuentes personalizadas?

Para estilizar los textos, llamas la propiedad style y le pasas un widget TextStyle. Ahí defines el tamaño con fontSize, por ejemplo 16, y la fuente con fontFamily.

En este caso, la fuente elegida es Quicksand, importada desde Google Fonts. Repites el mismo style en los otros encabezados para mantener consistencia visual en toda la tarjeta.

¿Cómo cambiar la fuente de un Text en Flutter? Dentro de la propiedad style del widget Text, agregas TextStyle y defines fontFamily con el nombre de la fuente. Si usas Google Fonts, primero importas el paquete y luego llamas la fuente por su nombre.

¿Cómo decorar un container con BoxDecoration?

Para que el área de la imagen sea más visible mientras trabajas en el diseño, usas la propiedad decoration del container y le pasas un BoxDecoration. Ahí puedes definir:

• color: un color temporal como naranja para visualizar el espacio.
• borderRadius: bordes redondeados con el tamaño que prefieras.

Esto te da una idea clara de dónde irá la imagen real de la receta y cómo se verá el contorno de la tarjeta cuando la reemplaces con datos definitivos.

Con estas herramientas ya tienes la base para personalizar tu app, crear nuevas tarjetas y escalar tu interfaz. Cuéntame en los comentarios cómo va el progreso de tu proyecto y qué estilos elegiste para tus recetas.