Sized Box

The Sized Box is a simple, invisible widget that creates a box with a specific width and height. Its primary purpose is to add fixed-size gaps or spacing within layouts.

Use Cases

The Sized Box widget is mainly for spacing and fixed size.

Use Sized Box when you want to:

• Add space between widgets

  • Vertical gap between texts, buttons, sections

  • Horizontal gap between icons or buttons in a row

• Give a widget a fixed width/height

  • Make icons, images, or custom widgets a consistent size

  • Create a fixed square or rectangle area

• Create an empty placeholder

  • Reserve space for content that may appear later

  • Keep layout alignment even when something is hidden

Core Concept: Creating Space

Think of the Sized Box as a rigid, empty spacer. While other widgets like Container can have padding and margins, the Sized Box has only one job: to occupy a precise amount of space. This makes it the most efficient and straightforward way to add gaps between widgets in a Column or Row.

• In a Column, a Sized Box with a Height creates vertical space.

• In a Row, a Sized Box with a Width creates horizontal space.

Using a Sized Box to add vertical space in a Column and horizontal space in a Row.

Properties

Property	Description
Width	The width of the box. Can be a fixed value in pixels (px).
Height	The height of the box. Can be a fixed value in pixels (px).

---

Default Properties

The Sized Box is a highly specialized layout widget. Its core properties (Width and Height) define its entire function, so it does not use the standard Default Properties for styling (like Background Color or Border).