Skip to content
Related Articles

Related Articles

Improve Article
How to Add Space Between Widgets in Flutter?
  • Difficulty Level : Expert
  • Last Updated : 14 Aug, 2020

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




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),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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(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),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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
Recommended Articles
Page :