How to fix Text widget padding?

As the font size increases, indents are added below and above inside the widget, because of which the elements are at different levels. How to remove this indent? Screen on the link

Widget build(BuildContext context) {
    return Container(
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         crossAxisAlignment: CrossAxisAlignment.end,
         children: <Widget>[
            Text("24°"),
            Text("40°", style: TextStyle(fontSize: 80.0,), textAlign: TextAlign.end),
            Text("42°")
         ],
       ),
    );
  }

Widget screen

Upvotes: 0

Views: 57

Answers (1)

Doc
Doc

Reputation: 11651

This solution reduces the weird shift problem.

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            Text(
              "24°",
              style: TextStyle(fontSize: 40.0),
            ),
            Text(
              "40°",
              style: TextStyle(fontSize: 100.0),
            ),
            Text(
              "42°",
              style: TextStyle(fontSize: 40.0),
            )
          ],
        ),
      )

output

EDIT:

showing the baseline

Upvotes: 1

Related Questions