Flutter – SizedBox Widget

21 Feb, 2022
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.
 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}
)
 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}
)
This allows creating a SizedBox with a specified size.
SizedBox.fromSize(
{Key key,
Widget child,
Size size}
)
 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}
)
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 libraryvoid 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  );}
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(
                  'GeksForGeeks',
                  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.
sagartomar9927
sagar0719kumar
simranarora5sos
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Android Project folder Structure
Broadcast Receiver in Android With Example
How to Update Gradle in Android Studio?
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image