Alineación y distribución espacial avanzada: Spacer() vs. Expanded() vs. SizedBox() en filas y columnas

Dominar la maquetación y la distribución espacial en Flutter dentro de un Row o Column requiere comprender a fondo el funcionamiento de tres widgets clave: SizedBox, Expanded y Spacer.

A continuación se detalla su naturaleza, comportamiento y casos de uso óptimos:

Widget	Naturaleza del espacio	Cuándo utilizarlo
SizedBox(width: 16)	Rígido / Fijo: Ocupa exactamente los píxeles indicados, ni uno más ni uno menos.	Cuando necesitas una separación constante y fija entre dos elementos contiguos (por ejemplo, 16 píxeles entre un icono y un texto).
Expanded(child: ...)	Elástico / Flexible con contenido: Obliga al widget hijo a ocupar todo el espacio libre disponible en el eje principal.	Cuando un widget hijo (como un Text largo o un campo de texto) debe ensancharse para rellenar la pantalla y evitar el error de desbordamiento (overflow).
Spacer(flex: 1)	Resorte invisible vacío: Es internamente un Expanded(child: SizedBox()). No contiene ningún widget visual.	Cuando quieres empujar elementos hacia los extremos opuestos de la pantalla (por ejemplo, un texto a la izquierda y un botón alineado al extremo derecho).

Ejemplo práctico de comparación en un Row

Row( // Fila que distribuye elementos horizontalmente
  mainAxisSize: MainAxisSize.max, // Ocupa todo el ancho disponible concedido por la pantalla
  children: [ // Elementos alineados horizontalmente
    const Text('Inicio'), // Primer texto ubicado a la izquierda
    const SizedBox(width: 16), // Separación fija e inmutable de 16 píxeles
    const Text('Subtítulo'), // Segundo texto contiguo
    const Spacer(), // Resorte elástico que empuja los siguientes elementos al extremo derecho
    ElevatedButton(onPressed: () {}, child: const Text('Acción')), // Botón alineado a la derecha
  ], // Fin de la lista children
) // Fin del widget Row

Trampa clásica con MainAxisSize.min

Si configuras mainAxisSize: MainAxisSize.min en un Row o Column, no debes utilizar Spacer() ni Expanded().

La razón técnica radica en las restricciones de layout del motor (BoxConstraints): MainAxisSize.min instruye a la fila a encogerse al tamaño mínimo estricto de sus elementos, mientras que Expanded y Spacer exigen expandirse para consumir todo el espacio libre disponible. Este conflicto lógico desencadena el clásico error de Flutter: RenderFlex children have non-zero flex but incoming max constraints are unbounded.