How to Align Two Widgets on Extremes In Flutter?

· 3 min read
How to Align Two Widgets on Extremes In Flutter
How to Align Two Widgets on Extremes In Flutter

When the user aligns two items at extremes one on the left and one on the right. we have one row that is aligned to the left and then a child of that row is aligned to the right. So today, Let’s take a deep dive in learning how to Align Two Widgets on Extremes in Flutter.

How to Align Two Widgets on extremes In Flutter??

First of all, Use a single Row widget instead, with mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Or you can use an expanded widget as shown below

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

A simple solution would be to use Spacer() between the two widgets, Try this:

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

So you can do it in many ways.

  • Using mainAxisAlignment: MainAxisAlignment.spaceBetween
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);
  • Using Spacer
Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);
  • and by Using Expanded
Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);
  • By Using Flexible
    Row(
      children: <Widget>[
        FlutterLogo(),
        Flexible(fit: FlexFit.tight, child: SizedBox()),
        FlutterLogo(),
      ],
    );

    So now, you will find that all of the above code will give us output like a below:

    align two item side by side
    align two-item side by side

Conclusion:

Thank you for being with us on the flutter journey!! Now, Let us know in the comments what were the methods you used previously.

Also, don’t forget to check out how to Align Single Widgets in the flutter.

So in this article, we have been through how to align two widgets on extremes in flutter. Stay Connected!! Lots of amazing content coming up your way!!

Keep Learning !!! Keep Fluttering !!!

Don’t forget to drop your valuable feedback to keep the enthusiasm going on!!

Flutter Agency 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.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter Development.

Leave a Reply