SizedBox in Flutter

Precisely control the size and spacing of your widgets

Download Complete Examples

What is SizedBox?

The SizedBox is a fundamental widget in Flutter that lets you control the size of its children or act as a spacer when it has no child.

Widget A
Widget B
Widget A
Widget B
Without SizedBox With SizedBox como espaciador

Basic Syntax

Basic Constructor of SizedBox

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

Main Features:

  • Box widget with a fixed size: Defines exact dimensions
  • Can contain a child: Controls the size of the child widget
  • Can be empty: Acts as an invisible spacer
  • Very efficient: Lightweight and optimized widget

When to use SizedBox?

Spacing between Widgets

Separate elements in rows or columns without using complex Padding

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

Size Control

Force a widget to have specific dimensions

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

Space Placeholders

Reserve space for content that will load later

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

Visual Examples

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')),
  ),
)

Properties of the SizedBox

Property Type Description Default Value
width double SizedBox width in pixels null (child's size)
height double SizedBox height in pixels null (child's size)
child Widget Child widget whose size is controlled null (spacer)

Special Values:

  • double.infinity: Takes up all available space
  • null: Adapts to the child's size or acts as a spacer
  • 0: Widget with zero size (useful for conditions)

Interactive SizedBox Tester

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

SizedBox vs Alternatives

Widget Advantages Disadvantages When to use
SizedBox Simple, efficient, specific-purpose Only basic size control Simple spacing and size control
Container More properties (color, margin, etc.) Heavier, overkill if only size is needed When you need additional decoration
Padding Precise control of internal spacing Doesn't control external size When you need internal margins
Spacer Specific to Flex widgets Only works in Row/Column Space distribution in flex layouts

Practical Exercises

Exercise 1: Uniform Spacing

Create a column with 3 buttons separated by 20 pixels from each other.

Solution:
Column(
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    SizedBox(height: 20),
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
    SizedBox(height: 20),
    ElevatedButton(onPressed: () {}, child: Text('Button 3')),
  ],
)

Exercise 2: Fixed Size Button

Create a button that always has a width of 200px regardless of the text.

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

Exercise 3: Responsive Layout

Use SizedBox to create a layout that takes up 80% of the available width.

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

Tips and Best Practices

✅ What you SHOULD do

  • Use SizedBox for simple spacing between widgets
  • Use SizedBox when you need exact dimensions
  • Use SizedBox.shrink() for zero-size widgets
  • Prefer SizedBox over Container for size control only

❌ What you should NOT do

  • Don't use SizedBox if you need decoration (use Container)
  • Avoid nesting multiple SizedBox unnecessarily
  • Don't use SizedBox for complex margins (use Padding)
  • Remember that SizedBox without a child is invisible

Pro Tip

Use SizedBox instead of Container when you only need to control the size. It's more efficient and communicates your intent better in the code.