Flutter how do I remove unwanted padding from Text widget?
The proper way you can get rid of the unwanted padding is by setting the height
property in the TextStyle
. With this you set the height for each line.
Text(
"Let's make\nsome pancakes",
style: TextStyle(
height: 1.2, //SETTING THIS CAN SOLVE YOUR PROBLEM
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w300,
),
textAlign: TextAlign.center,
),
In fact, we can confirm from the docs that:
For most fonts, setting height to 1.0 is not the same as omitting or setting height to null because the fontSize sets the height of the EM-square, which is different than the font provided metrics for line height.
For more info: https://api.flutter.dev/flutter/painting/TextStyle/height.html
So give it a try. It worked for me.
There are reasons why the Text
widget has this "padding". Take in consideration the next example:
Text(
'123 gyÓ',
style: TextStyle(
fontSize: 40.0,
),
),
As we can see, using another characters like the letters g and y and an uppercase O with an accent marker, shows us that there's no padding on the Text
widget really.
Fonts have ascenders and descenders on some characters, and there's also en ascent line for special characters like the accent marker. That's why numbers are centered in the middle. That's not padding on Flutter side, but typography design(?). Maybe you could find a way to sort your issue, by looking for a font without ascenders and descenders.
More info about fonts on Wikipedia
Conclusion: if you want to select the Text
widget with the Flutter inspector, and see no space around some characters, that is not possible.