How to Add Space Between Widgets in Flutter?

In this article, we’ll learn how to add space between widgets. There are many options available in flutter which you can use to provide space and make UI attractive. If you use Row and Column for arranging widgets, then by default limited options are available for alignment. There are many options available for the spacing of widgets like Padding, Spacer, Fractionally, SizedBox, Expanded, Flexible, etc. Here, we’ll learn about SizedBox, as it is easier to implement, provides more flexibility in alignment, and also easier to understand. 

A SizedBox is basically an empty box, if no constraints are provided. By default, it can become as big as it’s parent widget allows, but you can set its height and width according to your needs.

Constructors

Syntax:
const SizedBox({
      Key key,
      double width,
      double height,
      Widget child
 })

Below is the description of above-mentioned constraints:-

  1. Key key : This argument is of type key. A key is basically an identifier for widgets. A unique key can be provided to widgets to identify them.
  2. double width: This argument is of type double. You can provide double value as width to be applied to the child.
  3. double height: This argument is also of type double. The height that is to be applied to a child, is passed here as a double value.
  4. Widget child: The widget which is below this widget in the tree is passed here as a child and the above-mentioned constraints are automatically applied to it.

It is not compulsory to provide a child widget to SizedBox. For instance, if you are having two Card widgets and you want to give space between them, then you can use SizedBox. You can add SizedBox between those cards and pass the required height and width values.

Note: If you don’t provide a child widget to SizedBox and height and width are also null, then SizedBox would try to be as big as it’s parent widget allows. On the other hand, if the child widget is provided but height and width are null, then SizedBox would try to match it’s child’s size.



Example: With SizedBox

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: [
              SizedBox(
                height: 20,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
  
              SizedBox(   //Use of SizedBox
                height: 30,
              ),
  
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


Output :

flutter widgets with sidebox

Here, in the above example, we have made two cards. By, default we can’t add custom space between them. So, in order to add the required amount of space, we’ve used SizedBox with custom height, which is required. 

Example: Without SizedBox 

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: [
              // SizedBox(
              //   height: 20,
              // ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
  
              // SizedBox(
              //   height: 30,
              // ),
  
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


Output :

flutter widgets without sidebox

In the above output, we can see that there is very little space between the two cards. This little space between them is also because of the elevation provided to the cards. You can align them using various alignment options provided by the column, but that wouldn’t be convenient in this particular scenario. So, in such scenarios when we require custom spacing and sizing, we use SizedBox.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.