In this article you will learn how to use SizedBox
widget in flutter.
In this Article
What is SizedBox
Widget?
It’s a box widget in which we specify the size of the box.
If we give height
or width
parameter a null
value, then it will just take the child height and width as its dimensions.
If child widget don’t have any height or width then we have to give the dimension to the SizedBox
widget.
SizedBox
Properties
SizedBox
has four properties.
key
: This is the widget key.
height
: This is the height.
width
: This is the width.
child
: This is the child that we assign to this widget.
Where we can use SizedBox
?
We can use SizedBox
to give specific width and height to a specific child. SizedBox
enforces the child widget to take a fix height or width that we assign.
It can be used to add Space (gapes) between two widgets.
Difference Between SizedBox
and Container
Widgets
Container
can also be used to add space between widgets Or wrap the child and give it a specific height.
But Container
has some extra properties.
So,
We can use SizedBox
instead where we can specify child
, height
and width
. And It works similarly.
Also Container
has more properties so it’s a heavier widget and you can also make SizedBox
widget const
. Which will improve performance
How to Use SizedBox
widget
1. Give Space Between Widgets
2. Change Size of the Widget
Give Space Between Widgets
As we talk earlier SizedBox
is used to give space between widgets.
Snippet
const SizedBox(height: 20), //Add space Vertically
const SizedBox(width: 20), //Add Space Horizontally
Change Size of the Widget
We we give height
and width
property of the SizedBox
. It will ignore the width and height of the child widget and give it a specific width and height.
SizedBox(
height: 20, //This become the height of the container
child: Container(
height: 100, //This height will be ignored
color: Colors.red,
),
),
If we use the double.infinity()
as the height
or width
of the flutter SizedBox
widget, then it will take the whole width or height of the parent widget.
Scaffold(
body: SizedBox(
height: double.infinity, // This will take the whole space
width: double.infinity,
child: Container(
height: 100,
color: Colors.red,
),
),
);
SizedBox
Name Constructors
SizedBox
has three name constructors:
1. SizedBox.expand()
2. SizedBox.fromSize()
3. SizedBox.shrink()
SizedBox.expand()
This constructor can also be used to expand the child to an infinite width and height, which will expand it to the available space.
Scaffold(
body: SizedBox.expand( //Behave just like double.infinity height and width
child: Container(
height: 100,
color: Colors.red,
),
),
);
SizedBox
Inside the Column
Widget
Inside Column
widget, when we assign the double.infinity
width
to the SizedBox
. It will take the whole available space on the screen.
Infinite Height and Width
Column(
children: [
SizedBox(
width: double.infinity, // Take whole horizontal space
child: Container(
height: 100,
color: Colors.red,
),
),
],
),
Exception Error
But, If We assign the double.infinity
to the height property of the SizedBox
widget. It will not take the whole vertical space of the screen. Remember that! (Here Column BoxConstraints
enforces an infinite height).
Solution
The solution is simple just use the Expanded
widget to Make SizedBox
to take the complete height of the screen.
Before
Column(
children: [
SizedBox(
height: double.infinity, //Inside column this will produce error
child: Container(
height: 100,
color: Colors.red,
),
),
],
),
After
Column(
children: [
Expanded( //This will solve the problem
child: SizedBox(
height: double.infinity,
child: Container(
height: 100,
color: Colors.red,
),
),
),
],
),
SizedBox.fromSize()
This is used to make a SizedBox
widget from the Size()
object. This constructor will take the Size()
Object.
SizedBox.fromSize(
size: const Size(100, 150), //(width, height)
child: Container(
height: 100,
color: Colors.red,
),
),
What is Size()
?
It’s from the dart ui
. And we can pass width and height inside it.
So, Size()
width and height are used by the SizedBox
widget for creating flutter UI.
Now don’t have to pass the height and width to the SizedBox instead we use Size()
.
Where SizedBox.fromSize()
is helpful.
When you are working with media query. You can get the size of the device from the media query by using.
MediaQuery.of(context).size;
And this size object that you get real time can be used like below snippet to assign the dynamic width or height to a widget.
var size = MediaQuery.of(context).size;
var dynamicSize = size/4;
SizedBox.shrink()
This constructor is use to shrink everything inside the SizedBox
. But the question is how can we use it?
We use SizedBox
with ConstrainedBox
widgets constraints
property where we assign BoxConstraints
to specify min height and min width.
SizedBox.shrink(
child: Container(
height: 300,
color: Colors.red,
),
),
Flutter SizedBox
on Row
Widget
SizedBox
can also be used inside the Row
widget.
Row(
children: const [
Text('First Widget'),
SizedBox(width: 20), //Add horizontal space
Text('Second Widget')
],
),
Flutter SizedBox on ListView
Let’ see how SizedBox
can add space in ListView
ListView(
children: const [
Text('First Widget'),
SizedBox(height: 20),
Text('Second Widget')
],
),
Use SizedBox
to Make a Button
Full Width
Let’s create an elevated button and make its width as the width of the screen.
Column(
children: [
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {}, child: const Text('My Button')))
],
),
SizedBox as an Invisible Object
By default SizedBox
is invisible. Thats why we use it to show space. If you want to give colors to the box then consider Container
Widget.
SizedBox as padding
Look at this example.
AppBar(
title: const Text('MY PAGE'),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
),
const SizedBox(
width: 20, //Here Sized Box will add some padding after search icon
)
],
)
Sized Boxes in Flutter
Flutter has more widgets with SizedBox as the part of their name.
FractionallySizedBox
– Size its child to a fraction of total available space. docs
SizedOverflowBox
– specific size widget that pass its constraints through to its child – docs
Conclusion
I personally use SizedBox
to add some fix space. In my opinion, it is a useful widget. I like to create a space widget
.
class HorizontalSpace extends StatelessWidget {
const HorizontalSpace({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const SizedBox(width: 10);
}
}
I user HorizontalSpace
widget throughout my app. Because it has its build method, I think it’s increased performance.
For vertical space
class VerticalSpace extends StatelessWidget {
const VerticalSpace({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const SizedBox(height: 10);
}
}
Hope it was helpful. Thanks