Dive Deep into Flutter SizedBox Widget

A Tutorial to help you understand SizedBox Widget in Flutter

Introduction to SizedBox Widget

A SizedBox widget is basically like a simple box with some defined size.The code for a basic SizedBox is as simple as-
SizedBox()

This will create a SizedBox and it will become as big as it’s Parent allows.
Note: If SizedBox widget does not have a child and either Width or Height is null(means zero) then Widget try to be as big as it’s Parent allows.
If SizedBox widget have a child and either Width orHeight is null then Widget will try to match the child Size.

Let’s Take an Example

Scaffold(
body:SizedBox()
)
The Output is-

Here our SizedBox is inside the Scaffold widget.The Height/Width of SizedBox is null and aslo the widget does not have any child .So it take all space allow by Parent Widget (Whole screen) as shown in figure by the Purple Line.

How to define Width and Height

SizedBox(
width:100,
height:100
)
Let’s wrap the SizedBox widget inside a Container widget and give the Container widget a color .So we can actually see it

Container(
color: Colors.blue,
child: SizedBox(width: 100,
height: 100),
),

Here our SixedBox widget sized itself according to the given height and width.The Height and Width properties are optional you can use any of them or use both.

How to define Child

SizedBox(child:FlutterLogo()
)
Let’s move further with the above example
Container(
color: Colors.redAccent,
child: SizedBox(width: 100,
height: 100,
child:FlutterLogo(Size:30)
),
)

As you can FlutterLogo aligned itself with the Size of our SizedBox widget.But Why?
Because if given a child SizedBox forces it have the specified width and height.
If we change the Size of FlutterLogo(size:200) then also nothing happen

NOTE:

One thing SizedBox accquire space(i.e dependent on it’s Parent for Size)if it is allowed by it’s Parent widget.
Let’s take the above example and define Height and Width of the Container Let’s see what happens-
Container(
width: 50,
height: 50,
color: Colors.redAccent,
child: SizedBox(width: 100,
height: 100,
child:FlutterLogo()
),
)

As you can see the size of SizedBox widget decreases because it’s Parent (Container) won’t allow it to be 100*100.

Constructors

1.SizedBox.expand

It will Create a box that will become as large as it’s Parent allow.
Container(
width: 200,
height: 50,
color: Colors.redAccent,
child: SizedBox.expand(
child:FlutterLogo()
),
),

As you can see the SizedBox widget accquire all space that is allowed by it’s Parent widget(i.e in this case Container widget)

2.SizedBox.shrink

It will create a box that will become as small as it’s Parent allow.

Container(
width: 200,
height: 50,
color: Colors.redAccent,
child: SizedBox.shrink(
child:FlutterLogo()
),
),

As you see the SizedBox widget size would not decrease even we use shrink it is because the Parent widget not allow the SizedBox widget to have a size Less that that.

How to make SizedBox expand to Infinity

To make a SizedBox expand to infinity we use
width:double.infinity
height:double.infinity
Infinity does not mean that it will go out of the Screen of Device but it mean that it will accquire all Space that it’s Parent allows.

That’s It for this Article.Hope you like it.If you like it then share it with others .