White space in text - Flutter

Question

When using Unicode text in flutter there seems to be a lot of whitespace in each character which makes it hard to align. In the code and picture below, I'm trying to get the 35m sit on the cross arrows with no space in between. I'm also trying to get the three stars at the start to center align vertically with the word starburst and then center align the (35m and arrows), starburst, and thee stars all to center align with each other vertically.

Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  '\u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
                Column(
                  children: [
                    Text(
                      '35m',
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                    Text(
                      '\u{2194}',
                      style: TextStyle(fontSize: 35.0),
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );

Answer 1

You can use Stack instead of Column and align the Text as per your UI specifications:

Output Using Column:

Output Using Stack:

Full code:

return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '\u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
//                 SizedBox(width: 5.0),
                Container(
                  width: 50.0,
                  child: Center(
                    child: Stack(
                      children: [
                        Positioned(
                          top: 4,
                          child: Text(
                            '35m',
                            style: TextStyle(
                              fontSize: 18.0,
                            ),
                          ),
                        ),
                        Text(
                          '\u{2194}',
                          style: TextStyle(fontSize: 40.0),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

You might have to tweak Stack widget's children a bit, but I hope this answer gives the idea.

Answer 2

Make Row crossAxisAlignment property to CrossAxisAlignment.center

Row(
    crossAxisAlignment: CrossAxisAlignment.center
    children: [....

And

Make Column mainAxisAlignment propert to MainAxisAlignment.center

Column(
    mainAxisAlignment: MainAxisAlignment.center
    children: [...