How to align a text to the top of another character?

Question

I would like to align one set of numbers to the top of another set of numbers, just as the smallest currency units that can be found on some price tags.

I've placed two Text inside a Row with CrossAxisAlignment.start but I can't get them both to be the same height.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      '409',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
      ),
    ),
    Text(
      '00',
      style: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w600,
      ),
    ),
  ]
)

Unfortunately it's not yet supported in Flutter - See: https://github.com/flutter/flutter/issues/80. You can still achieve what you want by adding some top-padding to your superscripted text, but the padding would need to change depending on the size of the font. — Michael Horn, May 23 '22 at 23:56

score 2 · Answer 1 · answered May 24 '22 at 02:29

You need to use RichText for it. You can use WidgetSpan to align the text to the top.

You can take reference from the sample code below:

RichText(
              text: const TextSpan(style: TextStyle(fontSize: 20), children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '\$',
                      style: TextStyle(fontSize: 12),
                    )),
                TextSpan(text: '400'),
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '00',
                      style: TextStyle(fontSize: 12),
                    )),
              ]),
            )

And output is below:

score 1 · Answer 2 · answered May 24 '22 at 01:58

It caused Text widget has padding. The padding is needeed if you type some character like below.

Container(
          color: Colors.green,
          child: Text(
                  'Ğ ğ, H h, X x, I ı, İ i',
                   style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                 ),
             ),
     ),

May this is not the best practice to achieve what you want. You can try this code by setting height to 0.8 or other value.

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.green,
          child: Text(
                '409',
                 style: TextStyle(
                   fontSize: 20,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                ),
          ),
        ),
        Container(
          color: Colors.yellow,
          child: Text(
                 '00',
                 style: TextStyle(
                   fontSize: 12,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                 ),
          ),
        ),
      ]
  ),

How to align a text to the top of another character?

2 Answers2