CODEWITHSUNDEEP
dartflutter
Rasmus Christensen
Rasmus Christensen

Reputation: 8531

Align Text of different size in row to bottom

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?

Upvotes: 10

Views: 3734

Answers (1)

Jordan Davies
Jordan Davies

Reputation: 10861

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

Upvotes: 35

Related Questions