How to Add Space Between Widgets in Flutter?
Last Updated :
20 Jun, 2022
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:
- 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(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 :
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 [
Card(
elevation: 10,
child: Padding(
padding: EdgeInsets.all(25),
child: Text('GeeksforGeeks',
style: TextStyle(color: Colors.green),
),
),
),
Card(
elevation: 10,
child: Padding(
padding: 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.
Similar Reads
How to Build a Simple Login App with Flutter?
To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications after they can register and then log in. In this article, we are going to explain how to build a Design Login page us
8 min read
How to use Conditional Statement on Widget in Flutter?
Handling conditions is not too much difficult in Flutter. We can easily write our conditions based on the requirements which we are acquiring from our application. Let's work on conditions in flutter Apps. In this article, we'll talk about conditions and how we handle elements or widgets by using co
2 min read
Flutter - Concept of Key in Widgets
In this article, we will study Keys and when and where to use them. So you may ask what are keys? Well, Keys are the ones to preserve state when widgets move around the widget tree. It is used to preserve the user scroll location or keeping state when modifying a collection. Key's aren't needed if t
5 min read
How to Add .env File in Flutter?
Environment variables are used to store sensitive data such as passwords, API credentials, and other information that should not be written directly in code. It cannot be uploaded to github, gitlab, and many others. It can be done in different ways in different programming languages. But now we will
2 min read
What are Widgets Available in Flutter?
Flutter is a mobile app development framework that allows developers to create beautiful and responsive user interfaces with ease. This is made possible through the use of Flutter widgets, which are the building blocks of every Flutter application. In Flutter, widgets are the fundamental building bl
4 min read
Opacity Widget in Flutter
The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child
2 min read
How to Get the Height of a Widget in Flutter?
To get the height of a widget in Flutter, you can use the LayoutBuilder widget to obtain the constraints of the parent container and then get the height from those constraints. How to use it? You can simply use this widget anywhere in your project as you needed that. LayoutBuilder( builder: (BuildCo
3 min read
What is Widgets in Flutter?
Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter - Fade a Widget In and Out
The AnimatedOpacity widget in Flutter allows you to animate the opacity (transparency) of a child widget. You can use it to smoothly fade in or out a widget. In this article, we are going to implement the AnimatedOpacity Widget in Flutter and see the basic syntax of it. A sample video is given below
4 min read
Center widget in Flutter
Center widget comes built-in with flutter, it aligns its child widget to the center of the available space on the screen. The size of this widget will be as big as possible if the widthFactor and heightFactor properties are set to null and the dimensions are constrained. And in case the dimensions a
2 min read