Flutter: Ensure Text is perfectly centred when there are more items on one side?

Question

In a Row, how can I ensure that the Text with "Hello" in it is perfectly centered and not a bit to the left when the right most inner Row widget has more items than the left most inner Row widget?

Notice in the screenshot that the "Hello" is slight to the left.

I tried using a Stack but that seems to not work well if the text is longer than the available space as it causes the text to then overlap the side-colored widgets.

I am using the following code:

Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          Container(
            width: 45,
            height: 45,
            color: Colors.red,
          ),
        ],
      ),
      Text(
        "Hello",
        textAlign: TextAlign.center,
      ),
      Row(
        children: [
          Container(
            width: 45,
            height: 45,
            color: Colors.purple,
          ),
          Container(
            width: 45,
            height: 45,
            color: Colors.green,
          ),
        ],
      )
    ],
  ),
)

Answer 1

Wrap both the Rows and the Text widget, children of the first Row widget, with the Expanded widget and set the mainAxisAlignmnet of the right Row to MainAxisAlignment.end.

Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Row(
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.red,
            ),
          ],
        ),
      ),
      const Expanded(
        child: Text(
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
          textAlign: TextAlign.center,
        ),
      ),
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.purple,
            ),
            Container(
              width: 45,
              height: 45,
              color: Colors.green,
            ),
          ],
        ),
      ),
    ],
  ),
)

Output:

---

If either of the sides will have more widget's then you can use the Wrap widget instead of the inner Row widgets which will wrap the overflowing items to the next line.

Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Wrap(
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.red,
            ),
          ],
        ),
      ),
      const Expanded(
        child: Text(
          "Ex qui tempor dolore ex aliquip ex consectetur proident excepteur eu. Velit non sint laboris sit. Ut minim proident irure non ullamco deserunt qui. Quis eu tempor consequat amet irure consequat irure elit. Culpa id in laboris reprehenderit veniam voluptate tempor minim eu reprehenderit sit.",
          textAlign: TextAlign.center,
        ),
      ),
      Expanded(
        child: Wrap(
          alignment: WrapAlignment.end,
          children: [
            Container(
              width: 45,
              height: 45,
              color: Colors.purple,
            ),
            Container(
              width: 45,
              height: 45,
              color: Colors.green,
            ),
            Container(
              width: 45,
              height: 45,
              color: Colors.orange,
            ),
            Container(
              width: 45,
              height: 45,
              color: Colors.red,
            ),
          ],
        ),
      ),
    ],
  ),
)

Output: