Flutter SizedBox() Implementation : Add Space between Widgets

Do you want to add empty spaces between the different widgets? If yes then you have come to the right place. In this entire tutorial you will learn how to implement flutter sizedbox with different examples.

How to create Flutter Sizedbox

You can create a sizedbox using the SizedBox() constructor. There are many attributes for it that allow you to manipulate the Flutter Sizedbox. We will discuss each of them in detail.

Let’s create a simple SizedBox.

SizedBox(
          width: 100,
          height: 100,
        )

Here height and width is the attributes of the SizedBox() constructor.

Methods to implement Flutter Sizedbox

In this entire section, you will learn how to implement sizedbox for different widgets.

Method 1: Implement Flutter Sizedbox on Column widget

You already know that the flutter column is a mostly used widget that allows you to align widgets vertically. Let’s create a column widget that contains three containers aligned vertically. This container will be of the same size.

Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                )
              ],
            ),
          )

Before using the SizedBox() the containers inside the column will look like the below.

You can see there is no space between the container widget. The SizedBox()  provides space between the two widgets. Here the widgets are vertically aligned so You have to provide height attributes for the Sizedbox() constructor.

Let’s add space between the container of 50 pixels.

SizedBox(
                  height: 50,
                ),

Complete Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  height: 50,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                SizedBox(
                  height: 50,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                )
              ],
            ),
          )),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

Method 2: Implement SizedBox() on Row widget

The same things can be applied to the flutter row widget also. Flutter Row widgets allow its child widget to align row-wise. Therefore all the containers inside the Row Widget will be aligned horizontally .

Let’s create a Row widget with three containers.

Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                )
              ],
            ),
          )

You can see there is no space between the widgets. But when I use Sizedbox() then there will be space between the containers. However, you should note that all the widgets are aligned horizontally. So you have to use the width attribute for the SizedBox() constructor.

Lets add space of 50 dpi between the widgets.

SizedBox(width: 50,),

Complete Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 50,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                SizedBox(
                  width: 50,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                )
              ],
            ),
          )),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

Conclusion

Flutter Sizedbox is a very useful widget for providing space between the widgets. Flutter column and row also have attributes for providing space between widgets but if you want to fill empty space between any widgets then the SizedBox() allows you to do so.

These are examples of the implementation of the flutter SizedBox() widget. I hope you have liked this tutorial. If you have any queries then you can contact us for more help and information.