4

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?

enter image description here

Udit Chugh
  • 681
  • 2
  • 8
  • 26

2 Answers2

8

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.

Spatz
  • 18,640
  • 7
  • 62
  • 66
0

Have you tried with the wrap widget?

As your column view is the horizontal center. Then it will adjust your view to center and you can also add the space between the image and text.

Sunny
  • 3,134
  • 1
  • 17
  • 31
  • I haven't tried it for this case, but the time slots at the bottom are in a wrap and according to my understanding if I use it for this case it will be the same as row and the center will make it center for both elements in the wrap. – Udit Chugh Aug 08 '19 at 07:15