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?

Can you upload a picture of your current behavior and the expected one ? — Muldec, Dec 13 '18 at 10:12

score 30 · Accepted Answer · answered Dec 13 '18 at 10:21

30

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)),
    ],
),

answered Dec 13 '18 at 10:21

Jordan Davies

9,925
6
40
51

Thanks! didn't try that specific combination :) – Rasmus Christensen Dec 13 '18 at 10:37
Hello Jordan. Care to check my issue here please https://stackoverflow.com/questions/62171872/textbaselines-alphabetic-and-ideographic-enums-do-not-work-in-flutter – user1506104 Jun 08 '20 at 04:14

Align Text of different size in row to bottom

1 Answers1

Linked