How to Center Align Text Widget and then add a leading icon to the text?

Question

In a Row widget, I added a text Widget and I am able to center align the text by using mainAxisAlignment.center but when I add an icon before the text, the text obviously is now not centre-aligned because both Icon and Text get centre-aligned together.

Find below the screenshot for better understanding.

My designer suggested to have the "Morning" text centre-aligned to the screen and the icon should be prefixed to the text, how can I achieve that?

Answer 1

You can use a transparent color trick:

      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.wb_sunny, color: Colors.yellow),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text('Morning'),
          ),
          Icon(Icons.wb_sunny, color: Colors.transparent),
        ],
      )

The right icon is needed only for balance, and has a transparent color.