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.
Top comments (0)