How to Setup Space Between Elements In Flutter 2022

Row Widget is a widget where you can place multiple widgets in a Row Align Horizontally. so in this article, we will go through How to Set Space Between Elements In Flutter?

Table of Contents

How to Set Space Between Elements In Flutter?

ow 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.

Row widget has a property called MainAxisAlignment.

MainAxisAlignment

start – Place the children as close to the start of the main axis as possible.

end – Place the children as close to the end of the main axis as possible.

center – Place the children as close to the middle of the main axis as possible.

spaceBetween – Place the free space evenly between the children.

spaceAround – Place the free space evenly between the children as well as half of that space before and after the first and last child.

spaceEvenly – Place the free space evenly between the children as well as before and after the first and last child.

There are also a few ways to achieve the same. Consider a code as below:

Use SizedBox Widget if you want to set some specific spaceRow( children: <Widget>[ Text(“1”), SizedBox(width: 50), // give it width Text(“2”), ],)

We will get output like below:

Use Spacer if you want both to be as far apart as possible.Row( children: <Widget>[ Text(“1”), Spacer(), // use Spacer Text(“2”), ],)

We will get output like below:

Use mainAxisAlignment according to your needs:Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need children: <Widget>[ Text(“1”), Text(“2”), ],)

We will get output like below:

Use Wrap instead of Row Widget and give some spacing.

Wrap( spacing: 100, // set spacing here

children: <Widget>[ Text(“1”), Text(“2”), ],)

We will get output like below:

Use Wrap instead of Row and give it alignment. Wrap( alignment: WrapAlignment.spaceAround, // set your alignment children: <Widget>[ Text(“1”), Text(“2”), ],)We will get output like below:

Wrap
Widget

Integrating an API into a Flutter – Working with REST APIs

Conclusion:

In this article, We have been through How to Set Space Between Elements In Flutter

Additional Reading

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.
Thank you 🙂 Keep Learning !