Construir el cuerpo de una aplicación en Flutter requiere dominar widgets fundamentales como container, row, column y text. Estos elementos te permiten estructurar tarjetas, organizar contenido en filas y columnas, y aplicar estilos visuales que dan personalidad a cada pantalla. Aquí aprenderás a usarlos para diseñar una card de receta paso a paso.

Cómo organizar la jerarquía de widgets en Flutter

Antes de añadir el body, conviene formatear el código para visualizar la herencia entre widgets. Selecciona todo el código, ve a format y elige Dart como lenguaje [0:25]. El resultado se ve en cascada: cada widget queda anidado debajo de otro, lo que facilita entender la relación padre-hijo.

Esta estructura jerárquica es clave en Flutter. Cada widget tiene un child o children que define qué contiene, y los estilos se propagan según esa jerarquía.

Qué es un Container y por qué es la widget base de tu layout

Un container funciona como una caja invisible que puede contener cualquier widget y aplicar estilos del box model: padding, margin, border, color y tamaño. Es la pieza que más vas a usar para envolver y estilizar contenido.

¿Qué es un Container en Flutter? Es una widget tipo caja invisible que envuelve otros widgets y permite aplicar padding, margin, border, color y tamaño desde un solo lugar.

Para crear la card de receta, dentro del body se coloca un container con un child tipo card, que ya trae un delineado y borde por defecto que puedes personalizar [1:30].

Cómo dividir una card en secciones con Row

La idea es dividir la card en dos secciones: una con la imagen y otra con la información del creador y el nombre de la receta. Para colocar widgets en horizontal se usa row, y para apilarlos en vertical se usa column.

Cuando agregas múltiples widgets dentro de un row, no usas child sino children, y le indicas que recibirá una lista de widgets con la sintaxis <Widget>[].

Cómo definir tamaños con height y width en un Container

Dentro del row, el primer elemento es un container que reservará el espacio para la imagen. Las propiedades clave son:

• height: define el alto en píxeles, por ejemplo 125.
• width: define el ancho en píxeles, por ejemplo 100.
• child: la widget que se adaptará al tamaño del contenedor.

Los valores numéricos en Flutter se interpretan como píxeles lógicos, lo que mantiene proporciones consistentes entre dispositivos.

Cómo aplicar bordes redondeados con ClipRRect y BorderRadius

Para que la imagen tenga esquinas suaves se usa ClipRRect (con doble R) [3:55]. Esta widget recorta su contenido siguiendo un borderRadius. Se configura así:

• Llama a borderRadius: BorderRadius.circular(10) para definir el redondeo.
• Agrega la propiedad child con el contenido que quieres recortar.
• Si omites el child, aparece un warning porque ClipRRect necesita una widget principal, no solo estilo.

¿Para qué sirve ClipRRect en Flutter? Recorta un widget hijo aplicando bordes redondeados definidos por BorderRadius.circular, ideal para imágenes con esquinas suaves.

Cómo agregar espaciado con SizeBox según la dirección

El widget SizedBox funciona como un espaciador entre elementos. Lo interesante es que su comportamiento depende del contenedor padre:

• Dentro de un row, usas width porque el espaciado va en horizontal.
• Dentro de un column, usas height porque el espaciado va en vertical.

Esta lógica refleja cómo Flutter alinea sus ejes principales según la widget contenedora.

Cómo apilar textos con Column y Text

Para la segunda sección de la card, se usa un column con children que contiene varias widgets de tipo Text. En el ejemplo se agregan dos textos: el nombre de la receta ("lasaña") y el autor ("Alison Menes") [5:50].

Después se añade un container decorativo que actúa como línea separadora, con un height pequeño, un width amplio y un color tomado de la paleta Colors.orange.

Cómo hacer una card responsive con MediaQuery

Para que la tarjeta se adapte al ancho de pantalla, se usa MediaQuery, una propiedad muy usada en desarrollo responsive. La sintaxis es MediaQuery.of(context).size.width [7:30].

El context aquí no es casualidad: es el mismo context que aparece en la parte superior del método build y representa la ubicación heredada de cada widget en el árbol.

¿Qué hace MediaQuery.of(context).size en Flutter? Devuelve el tamaño completo de la pantalla del dispositivo, permitiendo que widgets como Container ajusten su width o height de forma responsive.

Con esta configuración, el width toma el ancho total de la pantalla automáticamente, mientras que el height se mantiene fijo en 125 para conservar la proporción de la card.

¿Qué otra widget te gustaría explorar para enriquecer tu card de recetas? Cuéntalo en los comentarios y comparte tu avance.