Reduce area below text baseline in Flutter

Question

I want to reduce the area below the baseline of certain text in my Flutter app. The space below can be seen here: Space below baseline

The text will always be numbers so it will never extend below the baseline. Here is an example of that for reference: Letters that extend below baseline

Is there a way to take up this space so the Divider at the bottom is closer to the bottom of the numbers?

I have tried StrutStyle widget but because I am using an AutoSizeText widget, this is a little hard to get working reliably.

Is my only option to find an uppercase-only font that has less space below the baseline? Or make a custom font myself (which I do know how to do, but is a pain)?

Answer 1

I faced your problem and came up with a solution.

You can use BaseLine widget. How to use And put baseline = style.fontSize

Example code:

Baseline(
        baseline: _style.fontSize,
        baselineType: TextBaseline.alphabetic,
        child: Text(
          text,
          style: _style,
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
        ),
      )

Before:

After:

But please notice every lower case like jgq. My solution is just for uppercase only.