Expanded: qué es y cómo funciona en Flutter

Qué es Expanded

Expanded es un widget envoltorio que toma un hijo y lo obliga a expandirse para llenar el espacio disponible en un contenedor Flex (Row, Column, Flex). Expanded no tiene representación visual propia — solo gestiona las restricciones (constraints) pasadas al elemento hijo.

En el núcleo de Expanded está el mecanismo Flex proporcionado por el framework Flutter. Cuando Row o Column calculan los tamaños de sus hijos, primero asignan espacio a elementos no flexibles (widgets regulares con tamaños fijos), luego distribuyen el espacio restante entre los hijos Expanded y Flexible proporcionalmente a sus factores flex.

Expanded usa Flexible.fit = FlexFit.tight. Esto significa que el hijo de Expanded debe ocupar todo el espacio asignado, incluso si su propio tamaño es menor. A diferencia de Flexible con Fit.loose, donde el hijo puede ser más pequeño que el área asignada, Expanded estira forzosamente el contenido.

En resumen: Expanded es la herramienta principal para crear diseños proporcionales en Flutter. Úselo cuando necesite que un elemento ocupe garantizadamente todo el ancho o alto disponible.

Expanded vs Flexible: diferencias clave

Expanded y Flexible ambos distribuyen espacio en contenedores Flex, pero se comportan de manera fundamentalmente diferente. La diferencia radica en la propiedad fit, que determina si el hijo puede ser más pequeño que el espacio disponible.

Expanded tiene un modelo de comportamiento estricto: su fit es igual a FlexFit.tight. Esto significa que el widget hijo recibe restricciones iguales al espacio disponible — ni más, ni menos. Si el hijo es más pequeño, se estira. Si es más grande, se encoge. Flexible usa FlexFit.loose, permitiendo que el elemento hijo tenga cualquier tamaño dentro del espacio asignado.

En la práctica: si una Row contiene dos Expanded con flex=1, cada uno ocupará exactamente la mitad del ancho. Si los reemplaza por Flexible con fit.loose, cada hijo puede ser más pequeño que la mitad si su propio tamaño es menor — el espacio restante quedará vacío.

En resumen: use Expanded para diseños proporcionales estrictos, Flexible cuando el hijo pueda ser más pequeño que el espacio disponible. Si no está seguro — empiece con Expanded, ofrece un comportamiento más predecible.

Factor flex: cómo se distribuye el espacio

Factor flex (parámetro flex) es un valor numérico que determina la porción del espacio disponible que recibirá un Expanded. Por defecto flex=1, lo que significa distribución igualitaria entre todos los hijos Expanded.

El algoritmo de distribución funciona en tres pasos. Primero: Flutter calcula el tamaño intrínseco de todos los hijos no flexibles. Segundo: el espacio restante se divide por la suma de todos los factores flex. Tercero: cada Expanded recibe una porción igual a su factor flex multiplicado por el tamaño de una unidad flex.

Por ejemplo, una Row de 300px de ancho contiene dos Expanded: el primero con flex=2, el segundo con flex=1. El espacio libre (300px menos los hijos no flexibles) se divide en 3 partes. El primero recibe 2/3, el segundo recibe 1/3. Si no hay hijos no flexibles, el primero recibe 200px, el segundo recibe 100px.

El factor flex puede ser cualquier número entero positivo. El valor 0 es un caso especial: Expanded con flex=0 se comporta como un widget no flexible regular, ocupando el espacio mínimo según el tamaño del hijo. Este comportamiento es equivalente a no tener Expanded.

En resumen: el factor flex es la clave para construir diseños flexibles. Use proporciones 1:1 para columnas iguales, 2:1 para paneles con área principal y lateral, 3:1 para interfaces con navegación estrecha.

Ejemplos de código con Expanded

Ejemplo 1 demuestra el uso básico de Expanded en Row para crear tres columnas iguales.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

En este ejemplo, tres Expanded con flex=1 (por defecto) dividen el ancho de Row por igual. Los contenedores se estiran a toda la altura establecida por Row y ocupan partes iguales. Este enfoque es conveniente para crear diseños de columnas con distribución proporcional.

Ejemplo 2 muestra el uso de diferentes factores flex para crear un diseño con barra lateral y contenido principal.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Sidebar'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Content Area'),
        ),
      ),
    ),
  ],
)

El segundo ejemplo crea un diseño típico con una barra lateral (25%) y un área de contenido principal (75%). flex=1 y flex=3 dan una proporción 1:3. Cuando el ancho de la pantalla cambia, las proporciones se mantienen automáticamente — esta es la base de las interfaces adaptativas.

En resumen: Expanded con diferentes factores flex es una herramienta estándar para construir diseños adaptativos. La combinación de Expanded en Column permite crear disposiciones proporcionales tanto horizontales como verticales.

Errores comunes al usar Expanded

Error 1: usar Expanded fuera de Row, Column o Flex. Si coloca Expanded directamente en Stack, ListView u otro contenedor que no sea Flex, Flutter lanza una LayoutException con el mensaje "Expanded widgets must be placed inside Flex widgets". Solución: verifique el widget padre — solo Row, Column o Flex.

Error 2: colocar Expanded dentro de ListView sin especificar shrinkWrap. ListView por defecto tiene altura infinita en la dirección de desplazamiento, y Expanded no puede calcular su parte. Solución: use shrinkWrap: true o envuelva el ListView en un SizedBox con altura fija.

Error 3: múltiples Expanded con flex total que excede el espacio disponible. Si una Row con ancho limitado contiene Expanded así como widgets con gran tamaño intrínseco, puede ocurrir desbordamiento. Solución: verifique los tamaños mínimos de los hijos no flexibles y use FittedBox o Flex fit si es necesario.

Error 4: Expanded anidados en Column dentro de Row. Si un Expanded dentro de una Column contiene otro Expanded dentro de una Row, puede surgir un conflicto de restricciones. Solución: limite la profundidad de anidamiento o use ConstrainedBox para establecer dimensiones explícitamente en niveles intermedios.

En resumen: Expanded requiere el contexto padre correcto. Siempre verifique que Expanded esté colocado directamente en Row, Column o Flex, y evite el anidamiento sin dimensiones explícitas.