Flutter align two items on extremes – one on the left and one on the right

In Flutter, when building user interfaces, it’s common to need to arrange widgets in a way that they are positioned at opposite ends of a row or column. This can be achieved using various alignment properties available within the framework.

Using MainAxisAlignment:spaceBetween property

One simple approach to aligning two items on extremes – one on the left and one on the right – is by utilizing the mainAxisAlignment property within the Row widget. By setting this property to MainAxisAlignment.spaceBetween, you can evenly distribute your widgets across a horizontal space.

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

Using Expanded Property

Another method for aligning items at opposite ends involves using the Expanded widget. This can be particularly useful when you need to ensure a specific aspect ratio or size of one of your widgets while maintaining alignment on either side.

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

A simple Spacer() Solution

A straightforward approach to placing two items at opposite ends of a row is by using the Spacer widget. This provides an easy way to distribute available space between widgets without requiring complex layouts or calculations.

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