Open In App

How to Add Space Between Widgets in Flutter?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 is 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 the above-mentioned constraints as follows: 

  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




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


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




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


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.



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads