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?

How to Set Space Between Elements In Flutter?

<img width=

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.

Start

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

End
End

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

Center
Center

spaceBetween – Place the free space evenly between the children.

Space Between
Space Between

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

Space Around
Space Around

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

Space Evenly
Space Evenly

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:

SizedBox Widget
Sized Box Widget

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:

Spacer Widget Flutter
Spacer Widget Flutter

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:

MainAxis Alignment
MainAxis Alignment

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:

Wrap
Wrap
  • 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

  • Wrap
  • Widget

Conclusion:

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

Additional Reading

READ MORE

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 !


DeepCrazyWorld

Hey, I'm Deepika a professional blogger, web designer, Android developer and software engineer. I like to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. I love thrills and travelling to new places and hills.

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.