Construir una aplicación con un diseño limpio y profesional requiere dominar la reutilización de widgets y las propiedades de estilo que Flutter ofrece. Aquí se aborda paso a paso cómo extraer una tarjeta en una widget independiente, aplicar espaciado con padding y SizedBox, alinear elementos con MainAxisAlignment y CrossAxisAlignment, y decorar contenedores para simular el espacio de una imagen.
¿Cómo crear una widget reutilizable para tarjetas de recetas?
Cuando la estructura de una tarjeta se repite varias veces, lo más eficiente es encapsularla en su propia widget. En este caso se crea una función llamada recipesCard que recibe un BuildContext como parámetro [01:00]. El BuildContext es fundamental porque permite que la widget acceda a la herencia del árbol de widgets de la aplicación.
Dentro de esta función se retorna el Container que contiene toda la estructura de la tarjeta. Una vez creada, se puede invocar tantas veces como sea necesario dentro de un Column, que acepta un listado de widgets como hijos [01:52]. Esto hace que la pantalla sea mucho más reusable y preparada para recibir datos reales en el futuro.
¿Por qué es importante pasar el BuildContext a la widget?
El BuildContext conecta la widget con el contexto de la clase primaria. Sin él, la tarjeta no podría heredar configuraciones ni acceder a recursos del árbol superior [02:10]. Se pasa el context de la clase principal a cada instancia de recipesCard para garantizar esa conexión.
¿Cómo agregar espaciado y alineación a las tarjetas?
Una vez que las tarjetas se renderizan, es común que aparezcan demasiado juntas entre sí y pegadas a los bordes de la pantalla [02:38]. Para resolverlo se utiliza la propiedad Padding.
- Se puede añadir rápidamente con el atajo
Alt + Enter.
- Por defecto aplica
8.0 en todos los lados.
- Con
EdgeInsets.only() se define un padding específico para left, top, right o bottom [03:05].
¿Qué hacen MainAxisAlignment y CrossAxisAlignment?
Dentro de un Column, el MainAxisAlignment controla la distribución vertical de los hijos. Al configurarlo como MainAxisAlignment.center, todos los elementos internos quedan centrados verticalmente [03:35].
Por su parte, el CrossAxisAlignment maneja la alineación horizontal. Usando CrossAxisAlignment.start, los elementos se posicionan al inicio del eje horizontal [03:52]. Combinando ambas propiedades se logra una disposición ordenada y visualmente equilibrada.
¿Cómo mejorar el estilo del texto y la decoración del contenedor?
Para separar elementos que están demasiado juntos, como el título, el autor y la receta, se utiliza SizedBox con la propiedad height (no width, porque se trabaja dentro de un Column) [04:15]. Un valor de cuatro píxeles entre cada elemento genera un respiro visual adecuado.
¿Cómo personalizar la tipografía con TextStyle?
Cada widget Text admite la propiedad style, que recibe un TextStyle [04:52]. Dentro se pueden definir:
- fontSize: tamaño de la fuente, por ejemplo
16.
- fontFamily: nombre de la fuente deseada, como
Quicksand, disponible a través de Google Fonts [05:10].
Este mismo estilo se replica en los demás textos de la tarjeta para mantener consistencia tipográfica.
Para el espacio donde irá la imagen, se emplea la propiedad decoration del Container con un BoxDecoration [05:35]. Esto permite:
- Asignar un color temporal (naranja, por ejemplo) para visualizar el área.
- Aplicar borderRadius para redondear las esquinas del contenedor [05:55].
De esta forma se obtiene una vista previa clara de dónde se ubicará la imagen y dónde la información textual dentro de cada tarjeta.
Con estas herramientas ya es posible personalizar tarjetas, controlar espaciado, tipografía y decoración. Comparte en los comentarios el avance de tu proyecto y cómo estás aplicando estos estilos en tus propias cards.
