What is SizedBox in Flutter: Simple Explanation and Usage

SizedBox in Flutter is a widget that creates a box with a fixed width, height, or both. It is mainly used to add space between widgets or to force a widget to have a specific size.

How It Works

Think of SizedBox as an invisible box you place between or around things in your app. It takes up space with the exact width and height you give it, like putting a spacer block between furniture in a room to keep them apart.

When you use SizedBox, Flutter reserves that space on the screen even if the box has no visible content. This helps control layout by adding gaps or forcing widgets to be a certain size.

Example

This example shows two text widgets separated by a SizedBox with a height of 20 pixels, creating vertical space between them.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Hello'),
              SizedBox(height: 20),
              Text('World'),
            ],
          ),
        ),
      ),
    );
  }
}

Output

The app shows the word 'Hello' and below it, with a 20 pixel gap, the word 'World' centered on the screen.

When to Use

Use SizedBox when you want to add fixed space between widgets, like padding but without changing the widget's own padding. It is also useful to force a widget to have a specific width or height.

For example, you might want to separate buttons with consistent gaps or make an image exactly 100 pixels wide. SizedBox is a simple and clear way to do this.

Key Points

• SizedBox creates fixed space with given width and/or height.
• It can be invisible but still take up space in layout.
• Useful for spacing and sizing widgets precisely.
• Simple alternative to padding or containers when only size matters.

Key Takeaways

SizedBox adds fixed width and height space in Flutter layouts.

It helps separate widgets or force their size without visible content.

Use it to create consistent gaps or set exact widget dimensions.

It is a lightweight and clear way to control spacing and sizing.