Flutter: SizedBox Widget – Complete Step-By-Step Guide

Flutter SizedBox Widget Tutorial
Flutter SizedBox Widget Tutorial

In this article you will learn how to use SizedBox widget in flutter.

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

Hussain Humdani

Hussain Humdani

while ( ! ( succeed = try() ) );

More Tutorials