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 the creation of a SizedBox with a specified size.

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

Constructor of SizedBox.shrink

 This implementation of the 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

Example 1:

import 'package:flutter/material.dart';

//Importing material design library
void main() {
  runApp(
    //Our app widget tree starts from here
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
        ), //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, fontSize: 25),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation of the above Program:

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 pixels and width as 200 pixels. The SizedBox widget is holding the Card as the child and restricting its size.

Using SizedBox.expand

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

Output:

Explanation of the above Program:

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:

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 of the above Program:

In this example, we have used the SizedBox widget to add a gap between the two Container widgets. Here, we have two Container widgets inside the Row. The first red container has a height and width of 200 pixels each. The second blue has 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.