Align Text of different size in row to bottom

Question

I have a row where the children are 2 Texts. The first is fontsize 20 and the second is size 13. I'm trying to align both to bottom but so far no luck. It's like the first large one gets some additional padding. Any good hints on how to align the two Text?

Answer 1

I think you need to play around with the crossAxisAlignment and textBaseline properties of your Row widget.

Try something like this:

Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: <Widget>[
      Text("foo", style: TextStyle(fontSize: 20)),
      Text("bar", style: TextStyle(fontSize: 13)),
    ],
),