The Column and Row widgets are very important widgets for building UI in the Flutter app. While you develop your app and add multiple widgets inside the Column and Row, you may find that there is no space added between the widgets. But you may want to add some space between the children to make your app design look better. So in this tutorial, we’ll see the top 4 ways to add space between widgets in Flutter with Column and Row example.
Ways to Add Space Between Widgets in Flutter
The space between widgets in Flutter can be added in the following ways:
You can use any of these methods as per your requirement.
1. Using SizedBox
The SizedBox widget allows you to create an empty box with a specific width and height. To use the SizedBox widget in Column, you have to specify the height property while to use it in the Row widget, you have to specify the width property.
If you are a visual learner, you can learn more about the SizedBox here:
Code Example:
Column(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'Button 1',
style: TextStyle(fontSize: 24),
),
),
SizedBox(
height: 50, // <-- SEE HERE
),
ElevatedButton(
onPressed: () {},
child: const Text(
'Button 2',
style: TextStyle(fontSize: 24),
),
),
],
)
//-----
Row(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'Button 1',
style: TextStyle(fontSize: 24),
),
),
SizedBox(
width: 20, //<-- SEE HERE
),
ElevatedButton(
onPressed: () {},
child: const Text(
'Button 2',
style: TextStyle(fontSize: 24),
),
),
],
)
Output:
2. Using Spacer
The Spacer widget in Flutter, allows you to add an empty space that you can adjust to match your design. By default, it takes all the available space and shifts the adjacent widget to the far side. Using the flex property of the Spacer widget, you can control the space between widgets.
Find out more about Spacer here:
Code Example:
Column(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Spacer(), // <-- SEE HERE
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Spacer(
flex: 2, // <-- SEE HERE
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
),
//-----
Row(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Spacer(), // <-- SEE HERE
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Spacer(
flex: 2, // <-- SEE HERE
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
),Output:
3. Using Expanded
When you wrap any child of Column or Row inside the Expanded widget, it will fill all available space in the main direction. For example, adding the Expanded widget in Column will expand in a vertical direction whereas the expanded widget in Row will fill all the available space in the horizontal direction. This is how it creates the empty space.
Find more about the Expanded widget here:
Code Example:
Column(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Expanded( // <-- SEE HERE
child: SizedBox.shrink(),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Expanded( // <-- SEE HERE
child: SizedBox.shrink(),
flex: 3,
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
)
//------
Row(
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Expanded( // <-- SEE HERE
child: SizedBox.shrink(),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
Expanded( // <-- SEE HERE
child: SizedBox.shrink(),
flex: 3,
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
)Output:
4. Using MainAxisAlignment (Recommended)
Using the MainAxisAlignment property of Column and Row, you can add the predefined space between the widgets. If you use the MainAxisAlignment property, you don’t need to add any extra widgets in between the widgets.
Here are the all MainAxisAlignment options:
enum MainAxisAlignment {
/// Place the children as close to the start of the main axis as possible.
start,
/// Place the children as close to the end of the main axis as possible.
end,
/// Place the children as close to the middle of the main axis as possible.
center,
/// Place the free space evenly between the children.
spaceBetween,
/// Place the free space evenly between the children as well as half of that
/// space before and after the first and last child.
spaceAround,
/// Place the free space evenly between the children as well as before and
/// after the first and last child.
spaceEvenly,
}Code Example:
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // <-- SEE HERE
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
)
//----
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // <-- SEE HERE
children: [
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
ElevatedButton(
onPressed: () {},
child: const Text(
'BTN',
style: TextStyle(fontSize: 24),
),
),
],
)Output:
Conclusion
In this tutorial, we learned the ways to add space between the widget inside of Column and Row with practical examples. We first saw the SizedBox, Spacer, an Expanded widget. These are the ways by which you add the filler widget between the children. Finally, we saw the recommended approach that uses the MainAxisAlignment option to add space between widgets in Flutter.
Would you like to check other interesting Flutter tutorials?
