Dive Deep into Flutter SizedBox Widget
Tags: dart, codenewbie, flutter
Published: 2020-06-17 05:22:28

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-
![SizedBox takes up all the Space](https://dev-to-uploads.s3.amazonaws.com/i/x5mq78xuqk1336tx67sg.png)

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),
),`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gf1nxn9ha642no2gcefj.png)

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)
  ),
)`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vdqx3ajf26ev34zzo4si.png)

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()
  ),
)`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rs3e21y7wlww091k5wcb.png)

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()
  ),
),`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1plkykuuc8v0t9l3vtpu.png)

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()
  ),
),`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e21odi8zp02x48w2xgi7.png)

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 .