SizedBox Widget – Flutter Widget Guide By Flutter Agency

SizedBox Widget – Flutter Widget Guide By Flutter Agency

What is SizedBox Widget?

SizedBox Widget is nothing but a simple box with a desired height and width.

Constructor SizedBox Widget will look like below :

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

Properties

• Key: The widget key, used to control if it should be replaced.
• Height: The height to be applied to the child.
• Width: The width to be applied to the child.
• Child: The widget below this widget where height/width will be applied.

If It does not have a child and either Width or Height is null then Widget tries to be as big as its Parent allows.
If the SizedBox Widget has a child and either Width or height is null then Widget will try to match the child Size. Consider a code snippet as below :

SizedBox(
        child:
        // To do
      ),

SizedBox having fix height & width

When we apply fix height and width to Container Widget which is a child of a SizedBox Widget. Our Code snippet will look like below :

SizedBox(
        child: Container(
          height: 100,
          width: 100,
          color: Colors.orangeAccent,
        ),
      ),

Above code will give us output like below :

SizedBox Widget

SizedBox having infinite width

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

We will get output like below :

SizedBox width Infinity

Using SizedBox.fromSize()

The constructor for it will look like below :

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

Here, the user needs to define sizes like width and height in size(300,200). The first parameter will be the width and the second parameter will be height. Consider code snippet like below :

Center(
      child: SizedBox.fromSize(
      size: Size(300, 200),
      child: RaisedButton(
        color: Colors.blue,
        child: Text(
          "SizedBox.fromSize",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        onPressed: () {},
      ),
    )

We will get output like below :

SizedBox.fromSize()

Using SizedBox.expand()

The constructor of SizedBox.expand() will look like below :

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

Code Snippet will look like below :

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

We will get output like below :

SizedBox.expand()

Using SizedBox.shrink()

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

Code Snippet will look like below :

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: () {},
    ),
  )
)

We will get output like below :

SizedBox Shrink

Thanks for reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.