Flutter row place one item at start and other item in the middle

Question

I have a card in which the first row of this card will have 2 items of text.

I would like to place an item at the very beginning and then the next item directly in the centre.

I have played around with MainAxisAlignment but nothing seems to cater for this scenario for example if I use MainAxisAlignment.spaceBetween then each item is placed at the end of the rows.

Is there an obvious way how to do this ?

Thanks

Answer 1

You could use the Spacer widget to fill available space in the row:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SpacedRow(),
          ),
        ),
      ),
    );
  }
}

class SpacedRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(width: 50, height: 50, color: Colors.red),
        Spacer(),
        Container(width: 50, height: 50, color: Colors.yellow),
        Spacer(),
      ],
    );
  }
}

Produces:

Answer 2

Though Jordan's answer achieved what the question mentioned, the yellow block does not look exactly center. I tried something like following

Stack(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Image.asset(
                  "images/toolbar_logo.webp",
                  width: 80,
                  height: 50,
                ),
              ],
            ),
            IconButton(
              icon: Icon(Icons.navigation),
              onPressed: () {},
              iconSize: 20,
            ),
          ],
        ),

Answer 3

You can use Spacer(), Expanded(), Flexible(), MainAxisAlignment.spaceBetween but here you may need to provide padding. There are many ways to achieve that. If you can share the screenshot or code, we can post the code accordingly.