Flutter - Using SizedBox Widget Examples

In Flutter, SizedBox widget is defined as a box with a specified size. Unlike Container, you cannot set color or decoration using SizedBox. The widget is only used for sizing the widget passed as child. Below are some usage examples which include the default constructor and some named constructors.

Using SizedBox

Here's the constructor of SizedBox

  const SizedBox({ Key key, this.width, this.height, Widget child })

Below is the description of the arguments you can pass on the constructor.

  • Key key: The widget key, used to control if it should be replaced.
  • double width: The width to be applied to the child.
  • double height: The height to be applied to the child.
  • Widget child: The widget below this widget in the tree, where the width and height constraints will be applied on.

There is no required argument. If you only need to set the width, you can only set the width property without setting height and so is the opposite. child is also not required. Therefore, you can utilize this widget for making an empty area by setting only the width and/or height.

  SizedBox(
    width: 250,
    height: 200,
    child: RaisedButton(
      color: Colors.blue,
      child: Text('Woolha', style: TextStyle(color: Colors.white)),
      onPressed: () {},
    ),
  )

Output:

Flutter - SizedBox - Basic

 

Below is an example that sets the width to infinity.

  SizedBox(
    width: double.infinity,
    height: 200,
    child: RaisedButton(
      color: Colors.blue,
      child: Text('Woolha', style: TextStyle(color: Colors.white)),
      onPressed: () {},
    ),
  )

Output:

Flutter - SizedBox - Infinity width

 

Using SizedBox.fromSize

The fromSize named constructor replaces the width and height arguments with an argument for passing a Size instance. The output should be the same as the first example.

  SizedBox.fromSize({ Key key, Widget child, Size size })
  SizedBox.fromSize(
    size: Size(250, 200),
    child: RaisedButton(
      color: Colors.blue,
      child: Text('Woolha', style: TextStyle(color: Colors.white)),
      onPressed: () {},
    ),
  )

Output:

Flutter - SizedBox - Size

 

Using SizedBox.expand

If you want to set both width and height to infinity, Flutter provides a named constructor expand which makes it easier for you. The box size will be as large as its parent allows.

  const SizedBox.expand({ Key key, Widget child })
  SizedBox.expand(
    child: RaisedButton(
      color: Colors.blue,
      child: Text('Woolha', style: TextStyle(color: Colors.white)),
      onPressed: () {},
    ),
  )

Output:

Flutter - SizedBox - Expand

 

Using SizedBox.shrink

This named constructor is used to create a box where the size is as small as its parent allows. To make it more obvious, the below example uses BoxConstraints with minHeight and minWidth properties set.

  const SizedBox.shrink({ Key key, Widget child })
  ConstrainedBox(
    constraints: new BoxConstraints(
      minHeight: 20.0,
      minWidth: 80.0,
    ),
    child: SizedBox.shrink(
      child: RaisedButton(
        color: Colors.blue,
        child: Text('Woolha', style: TextStyle(color: Colors.white)),
        onPressed: () {},
      ),
    )
  )

Output:

Flutter - SizedBox - Shrink

 

That's how to use the widget. It's very useful if you need to set the size of a widget to have a specific width and/or height.