How to Set Space Between Elements In Flutter ?

· 5 min read
How to Set Space Between Elements In Flutter
How to Set Space Between Elements In Flutter

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?

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 space

Row(
  children: <Widget>[
    Text("1"),
    SizedBox(width: 50), // give it width
    Text("2"),
  ],
)

We will get output like below:

SizedBox Widget
SizedBox 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?

Keep Learning !!! Keep Fluttering !!!
Drop us your valuable feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply