Flutter – SizedBox Widget

SizedBox is a built-in widget in flutter SDK.  It is a simple box with a specified size. It can be used to set size constraints to the child widget, put an empty SizedBox between the two widgets to get some space in between, or something else. It is somewhat similar to a Container widget with fewer properties.

Constructor of SizedBox Class:

It draws a simple box with the mentioned height and width or a child widget inside. 

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

Constructor of SizedBox.expand:

This implementation of the SizedBox widget allows it to be as big as the parent widget allows it to be. 

const SizedBox.expand(
{Key key,
Widget child}
)

Constructor of SizedBox.fromSize: 

This allows creating a SizedBox with a specified size.

SizedBox.fromSize(
{Key key,
Widget child,
Size size}
)

Constructor of SizedBox.shrink:

This implementation of the SizedBox widget allows it to be as small as the child widget allows it to be. 

const SizedBox.shrink(
{Key key,
Widget child}
)

Properties of SizedBox Widget:

• child: This property takes in a child widget as the object to display it below the SizedBox in the widget tree or inside the SizedBox n the screen.
• height: This property specifies the height of SizedBox in pixels. It is a double value as the object.
• width: This property also holds in a double value as the object to give width to the SizedBox.

Example 1:

Dart

import 'package:flutter/material.dart';

//Importing material design library
void main() {
  runApp(
    //Our app widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          //SizedBox Widget
          child: SizedBox(
            width: 200.0,
            height: 100.0,
            child: Card(
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation: By taking a look at the code we can see that the body of this flutter app is holding the Center widget as the parent of all. Inside the Center widget, we have a SizedBox whose height is mentioned as 100 and width as 200. The SizedBox widget is holding the Card as the child and restricting its size.

Using SizedBox.expand

 child: SizedBox.expand(
            child: Card(
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox.expand
        ), //Center
      ), //Scaffold

Output:

Explanation: Here we have used the SizedBox.expand which is enabling it to expand as big as its parent allows. And the Center widget allows it to fill the whole screen.

Example 2:

 body: Center(
          child: Row(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ), //Container
              //SizedBox Widget
              SizedBox(
                width: 50,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ) //Container
            ], //<Widget>[]
          ), //Row
        ), //Center

Output: 

Explanation: In this example, we have used the SizedBox widget to add a gap between the two Container widgets. Here we are having two Container widgets inside the Row. The first container is given red color and height and width of 200 pixels each. The second blue container is having a height and width of 100 pixels each. And in between these two containers, we have a SizedBox widget with a width of 50 pixels and no height.