Aligning two widgets in a row, one in the middle and the next on the right side

Question

I want to place a text widget in the middle of the screen and an icon on the right side. My code is:

Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text('Today',
              style: TextStyle(
              color: Colors.blue,
              fontSize: 26,
              fontWeight: FontWeight.w600)),
            Icon(
              Icons.pause_circle_outline,
              color: Colors.blue,
              size: 50,
            )
          ],
        )
      ],
    )

When I use mainAxisAlignment: MainAxisAlignment.spaceAround I get the following result which is not desired.

Answer 1

You can use MainAxisAlignment.spaceBetween, and adding another widget with same size (as last one) on 1st index to maintain spacing.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: const [
    SizedBox(
      width: 50,
    ),
    Text(
      'Today',
      style: TextStyle(
        color: Colors.blue,
        fontSize: 26,
        fontWeight: FontWeight.w600,
      ),
    ),
    Icon(
      Icons.pause_circle_outline,
      color: Colors.blue,
      size: 50,
    )
  ],
)