How to Add Space Between Widgets in Flutter? - GeeksforGeeks

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.
Syntax:
const SizedBox({
      Key key,
      double width,
      double height,
      Widget child
 })

Below is the description of above-mentioned constraints:-
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.double width: This argument is of type double. You can provide double value as width to be applied to the child.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.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.
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.
double width: This argument is of type double. You can provide double value as width to be applied to the child.
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.
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 :
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 :
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.
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - BoxShadow Widget
ListView Class in Flutter
Flutter - Flexible Widget
Operators in Dart
Flutter - Stack Widget
What is widgets in Flutter?
Android Studio Setup for Flutter Development