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.

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).

---

Best Practices

• Use for Spacing: The most common use case is to create space between widgets. For example, add a Sized Box with Height: 16 between two Text widgets in a Column to separate them.

• Constraining a Child: While primarily used for spacing, if you place another widget inside a Sized Box, it will force the child to adopt the Sized Box's dimensions. This can be useful for giving a specific size to a widget that doesn't have its own width or height properties.

• Efficiency: For creating simple, empty space, the Sized Box is more performant than using a Container with padding or margins.