Qué propiedades tiene SizedBox y por qué debes usar Container si necesitas color, bordes o imágenes

El widget SizedBox es uno de los componentes más utilizados en Flutter para establecer espacios fijos de separación o dimensiones exactas. A menudo surge la duda de si se le pueden aplicar colores, bordes redondeados, sombras o imágenes, o qué propiedades admite exactamente.

Propiedades de SizedBox

SizedBox está diseñado deliberadamente por el equipo de Flutter para ser el widget más simple, rápido y ligero de todo el motor de renderizado. Por este motivo, carece de propiedades visuales de pintado y admite exclusivamente tres propiedades:

• width (ancho en píxeles lógicos).
• height (alto en píxeles lógicos).
• child (un widget hijo opcional).

Además de su constructor habitual, cuenta con constructores nombrados especiales muy útiles:

• SizedBox.shrink(): Fuerza dimensiones de 0x0 píxeles (habitual para colapsar u ocultar componentes condicionalmente).
• SizedBox.expand(): Se expande para ocupar todo el espacio disponible concedido por su widget ancestro.
• SizedBox.square(dimension: 50): Atajo para generar una caja cuadrada de 50x50 píxeles.

Cuándo dar el salto a Container

Si necesitas aplicar color de fondo, bordes, esquinas redondeadas, degradados o imágenes, el widget adecuado es Container utilizando su propiedad decoration: BoxDecoration(...):

Container( // Contenedor que permite aplicar decoración y dimensiones avanzadas
  width: 100, // Anchura fija de 100 píxeles
  height: 50, // Altura fija de 50 píxeles
  decoration: BoxDecoration( // Objeto de estilo visual completo
    color: Colors.blue, // Color de fondo de la caja
    borderRadius: BorderRadius.circular(12), // Curvatura de bordes redondeados
    border: Border.all(color: Colors.black, width: 2), // Borde perimetral negro de 2 píxeles
    image: const DecorationImage( // Imagen de fondo decorativa
      image: NetworkImage('https://ejemplo.com/foto.png'), // Fuente remota de la imagen
    ), // Fin de DecorationImage
  ), // Fin de BoxDecoration
) // Fin del widget Container