SizedBox en Flutter

Controla el tamaño y espaciado de tus widgets de forma precisa

Descargar Ejemplos Completos

¿Qué es SizedBox?

El SizedBox es un widget fundamental en Flutter que permite controlar el tamaño de sus hijos o actuar como espaciador cuando no tiene hijo.

Widget A
Widget B
Widget A
Widget B
Sin SizedBox Con SizedBox como espaciador

Sintaxis Básica

Constructor Básico de SizedBox

SizedBox(
  width: 100,    // Ancho en píxeles
  height: 50,    // Alto en píxeles
  child: Text('Mi Widget'),
)

Características Principales:

  • Widget de caja con tamaño fijo: Define dimensiones exactas
  • Puede contener un hijo: Controla el tamaño del widget hijo
  • Puede ser vacío: Actúa como espaciador invisible
  • Muy eficiente: Widget ligero y optimizado

¿Cuándo usar SizedBox?

Espaciado entre Widgets

Separar elementos en filas o columnas sin usar Padding complejo

Column( children: [ Text('Elemento 1'), SizedBox(height: 20), Text('Elemento 2'), ], )

Control de Tamaño

Forzar un widget a tener dimensiones específicas

SizedBox( width: 200, height: 100, child: ElevatedButton(...), )

Marcadores de Espacio

Reservar espacio para contenido que se cargará después

SizedBox( width: double.infinity, height: 150, )

Ejemplos Visuales

1. SizedBox como Espaciador

Row(
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    SizedBox(width: 30), // Espacio de 30px
    Container(color: Colors.blue, width: 50, height: 50),
  ],
)

2. SizedBox para Control de Tamaño

200x80
SizedBox(
  width: 200,
  height: 80,
  child: Container(
    color: Colors.green,
    child: Center(child: Text('200x80')),
  ),
)

3. SizedBox.expand

Ocupa todo el espacio
SizedBox.expand(
  child: Container(
    color: Colors.orange,
    child: Center(child: Text('Expandido')),
  ),
)

Propiedades del SizedBox

Propiedad Tipo Descripción Valor por Defecto
width double Ancho del SizedBox en píxeles null (tamaño del hijo)
height double Alto del SizedBox en píxeles null (tamaño del hijo)
child Widget Widget hijo cuyo tamaño se controla null (espaciador)

Valores Especiales:

  • double.infinity: Toma todo el espacio disponible
  • null: Se adapta al tamaño del hijo o actúa como espaciador
  • 0: Widget con tamaño cero (útil para condiciones)

Probador de SizedBox Interactivo

150 px
100 px
150 x 100
SizedBox( width: 150, height: 100, child: Container(...), )

SizedBox vs Alternativas

Widget Ventajas Desventajas Cuándo usar
SizedBox Simple, eficiente, propósito específico Solo control de tamaño básico Espaciado y control de tamaño simple
Container Más propiedades (color, margen, etc.) Más pesado, sobrecarga si solo se necesita tamaño Cuando necesitas decoración adicional
Padding Control preciso de espacio interno No controla tamaño externo Cuando necesitas márgenes internos
Spacer Específico para Flex widgets Solo funciona en Row/Column Distribución de espacio en flex layouts

Ejercicios Prácticos

Ejercicio 1: Espaciado Uniforme

Crea una columna con 3 botones separados por 20 píxeles entre ellos.

Solución:
Column(
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Botón 1')),
    SizedBox(height: 20),
    ElevatedButton(onPressed: () {}, child: Text('Botón 2')),
    SizedBox(height: 20),
    ElevatedButton(onPressed: () {}, child: Text('Botón 3')),
  ],
)

Ejercicio 2: Botón de Tamaño Fijo

Crea un botón que siempre tenga 200px de ancho sin importar el texto.

Solución:
SizedBox(
  width: 200,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Botón de ancho fijo'),
  ),
)

Ejercicio 3: Layout Responsive

Usa SizedBox para crear un layout que ocupe el 80% del ancho disponible.

Solución:
LayoutBuilder(
  builder: (context, constraints) {
    return SizedBox(
      width: constraints.maxWidth * 0.8,
      child: Container(color: Colors.blue),
    );
  },
)

Consejos y Mejores Prácticas

✅ Lo que SÍ debes hacer

  • Usa SizedBox para espaciado simple entre widgets
  • Emplea SizedBox cuando necesites dimensiones exactas
  • Utiliza SizedBox.shrink() para widgets de tamaño cero
  • Prefiere SizedBox sobre Container para solo control de tamaño

❌ Lo que NO debes hacer

  • No uses SizedBox si necesitas decoración (usa Container)
  • Evita anidar múltiples SizedBox innecesariamente
  • No uses SizedBox para márgenes complejos (usa Padding)
  • No olvides que SizedBox sin hijo es invisible

Tip Profesional

Usa SizedBox en lugar de Container cuando solo necesites controlar el tamaño. Es más eficiente y comunica mejor tu intención en el código.