Flutter SizedBox Widget - Sizing and Spacing

SizedBox is a simple but very functional widget used in Flutter to give widgets a fixed size or create space between widgets.

What is SizedBox?

SizedBox creates a box where you can specify a fixed width and/or height. It has two main purposes:

Give widgets a fixed size
Create space between widgets

Basic Usage

Giving Fixed Size

SizedBox(
  width: 200,
  height: 100,
  child: Container(
    color: Colors.blue,
    child: Center(child: Text('200x100 box')),
  ),
)

We limited the Container's size by putting it inside SizedBox.

Specifying Only Width

SizedBox(
  width: 150,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Fixed width button'),
  ),
)

Specifying Only Height

SizedBox(
  height: 80,
  child: Image.network('https://example.com/logo.png'),
)

Creating Space

One of the most common uses of SizedBox is creating invisible space between widgets.

Vertical Space (Inside Column)

Column(
  children: [
    Text('First text'),
    SizedBox(height: 16), // 16 pixels vertical space
    Text('Second text'),
    SizedBox(height: 24), // 24 pixels vertical space
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
)

Horizontal Space (Inside Row)

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 8), // 8 pixels horizontal space
    Text('Starred'),
    SizedBox(width: 16), // 16 pixels horizontal space
    Icon(Icons.favorite),
  ],
)

SizedBox.shrink()

Creates a widget with no content and zero size. Useful for showing nothing in conditional situations:

Column(
  children: [
    Text('Always visible'),
    condition ? Text('Conditionally visible') : SizedBox.shrink(),
    Text('Always visible'),
  ],
)

SizedBox vs Container

Container can also specify size, so what's the difference?

Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(8),
  child: Text('Container'),
)

Has properties like padding, margin, color, decoration
More features = more processing load

SizedBox

SizedBox(
  width: 100,
  height: 100,
  child: Text('SizedBox'),
)

Only does sizing
Lighter and more performant
Should be preferred when only size is needed

Rule: Use SizedBox if you're only specifying size, use Container if you need color/padding/decoration.

Standard Space Values

Recommended space values according to Material Design:

SizedBox(height: 4)   // Very small space
SizedBox(height: 8)   // Small space
SizedBox(height: 12)  // Medium-small space
SizedBox(height: 16)  // Medium space
SizedBox(height: 24)  // Large space
SizedBox(height: 32)  // Very large space
SizedBox(height: 48)  // Section spacing

Summary

SizedBox:

Used for specifying fixed size
Creates invisible space between widgets
Lighter and more performant than Container
Has shrink(), expand(), square() factory constructors
Most commonly used widget for spacing

SizedBox is one of the widgets you'll use most when creating layouts in Flutter.

Flutter: Sizing and Spacing with SizedBox