Sized Box Widget Explained

Hello there! Let us first explore Flutter Sized Box Widget.

In many cases you know exactly how much space (width and height) a certain widget should take in your application. for example if you want to give fixed width and height or anyone of these properties. You can use SizedBox widget which enforces its child widgets to have width and height property. If height or width is not specified or is set to null the widget will match with the size of its child widget dimensions (width and height).

You can also use SizedBox without any child. It will not be rendered to display on the screen but it will must take up space according to given dimensions (width and height) along with any parent widget constraints. You can use this technique to give fixed (height/width) spacing between Widgets. If there is no height and width declared or is set to null. it will not take up any space (ZERO width and height will be considered).

Sized Box widget can only take One Child Widget because it extends from SingleChildRenderObjectWidget which enforces to have a single child slot.

We will also Explore below widget classes and shortcuts related to the SizedBox widget.

  • SizedBox
  • SizedBox.expand()
  • SizedBox.shrink()
  • SizedBox.fromSize()
  • FractionallySizedBox
  • SizedOverflowBox

This article is published originally on


Contact Us