What is SizedBox in Flutter?

SizedBox is a simple box with a specified size. It can be used to: (1) add fixed empty space between widgets, (2) constrain a child to a specific width and height, or (3) create a placeholder with exact dimensions. It's one of the most frequently used widgets for layout spacing.

Basic Usage

You can create a SizedBox with just a width and/or height. If you provide a child, it will be forced to those dimensions.

DARTRead-only

// Empty space 20 pixels wide
SizedBox(width: 20)

// Empty space 10 pixels tall
SizedBox(height: 10)

// A red square exactly 50x50
SizedBox(
  width: 50,
  height: 50,
  child: Container(color: Colors.red),
)

// Empty space 20 pixels wide
SizedBox(width: 20)

// Empty space 10 pixels tall
SizedBox(height: 10)

// A red square exactly 50x50
SizedBox(
  width: 50,
  height: 50,
  child: Container(color: Colors.red),
)

Key Properties

width: The width in logical pixels. If null, it will try to match the parent's width (if no child) or the child's width.
height: The height in logical pixels. If null, it will try to match the parent's height (if no child) or the child's height.
child: An optional widget to place inside the box. The child will be constrained to the given dimensions.

Using SizedBox for Spacing

The most common use is to add fixed gaps between widgets, especially in Columns and Rows.

DARTRead-only

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Middle'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Middle'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

Constraining a Child

Wrap a widget with SizedBox to give it a fixed size, overriding its own size preferences.

DARTRead-only

SizedBox(
  width: 200,
  height: 100,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Wide Button'),
  ),
)

SizedBox(
  width: 200,
  height: 100,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Wide Button'),
  ),
)

SizedBox.expand

Use SizedBox.expand() to create a box that expands to fill the available space from its parent.

DARTRead-only

SizedBox.expand(
  child: Container(color: Colors.blue),
)

SizedBox.expand(
  child: Container(color: Colors.blue),
)

Common Mistakes Beginners Make

Using SizedBox with no dimensions and no child: It becomes invisible and takes no space.
Assuming SizedBox always forces its size on the child: It does, but if the child has tighter constraints, it may not work (e.g., a Text with unbounded width).
Using SizedBox for flexible spacing: If you need proportional spacing, use Expanded or Spacer instead.

Key Points to Remember

SizedBox is perfect for fixed‑size gaps and constraining children.
Use width and height to set dimensions; omit one to let it be determined by parent/child.
SizedBox.shrink() creates a zero‑sized box (useful for hiding widgets).
SizedBox.expand() fills the available space.

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SizedBox Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(color: Colors.red, child: Text('No SizedBox')),
              SizedBox(height: 20),
              Container(color: Colors.green, child: Text('After 20px gap')),
              SizedBox(height: 20),
              SizedBox(
                width: 150,
                height: 50,
                child: Container(color: Colors.blue, child: Center(child: Text('150x50'))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What happens if you create a SizedBox with no width, no height, and no child?

It throws an error

It becomes a zero‑sized invisible box

It expands to fill the parent

It takes the size of its parent

of 2

How do you create a SizedBox that expands to fill all available space?

SizedBox(expand: true)

SizedBox.expand()

SizedBox(fill: true)

SizedBox(expand: true, child: ...)

// Empty space 20 pixels wide SizedBox(width: 20) // Empty space 10 pixels tall SizedBox(height: 10) // A red square exactly 50x50 SizedBox( width: 50, height: 50, child: Container(color: Colors.red), )

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SizedBox Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(color: Colors.red, child: Text('No SizedBox')),
              SizedBox(height: 20),
              Container(color: Colors.green, child: Text('After 20px gap')),
              SizedBox(height: 20),
              SizedBox(
                width: 150,
                height: 50,
                child: Container(color: Colors.blue, child: Center(child: Text('150x50'))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What happens if you create a SizedBox with no width, no height, and no child?

It throws an error

It becomes a zero‑sized invisible box

It expands to fill the parent

It takes the size of its parent

of 2

How do you create a SizedBox that expands to fill all available space?

SizedBox(expand: true)

SizedBox.expand()

SizedBox(fill: true)

SizedBox(expand: true, child: ...)

Flutter SizedBox Widget Tutorial for Beginners

Flutter SizedBox Widget Tutorial for Beginners

What is SizedBox in Flutter?

Basic Usage

Key Properties

Using SizedBox for Spacing

Constraining a Child

SizedBox.expand

Common Mistakes Beginners Make

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?

Flutter SizedBox Widget Tutorial for Beginners

Flutter SizedBox Widget Tutorial for Beginners

What is SizedBox in Flutter?

Basic Usage

Key Properties

Using SizedBox for Spacing

Constraining a Child

SizedBox.expand

Common Mistakes Beginners Make

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?