Skip to content
Related Articles

Related Articles

Flutter – SizedBox Widget
  • Difficulty Level : Hard
  • Last Updated : 03 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
//Importing material design liberary
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(
                  'GeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

chevron_right


Output:

SizedBox Widget

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(
                  'GeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox.expand
        ), //Center
      ), //Scaffold

Output:

Using SizedBox.expand

Explanation: Here we have used the SixedBox.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,
              ), //Conatainer
              //SizedBox Widget
              SizedBox(
                width: 50,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ) //Conatainer
            ], //<Widget>[]
          ), //Row
        ), //Center

Output: 

Using SizedBox.expand

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :