I have a Text
widget and not sure why it seems to just have padding at the top and bottom even though I didn't set any in the code. This is from the default Flutter app, I just modified the font size.
body: Center(
child: Column(
children: <Widget>[
Text(
'0:00.00',
style: TextStyle(fontSize: 76),
),
],
),
),
This is a screenshot of the highlighted Text
widget in Android Studio. There's really nothing else adding any padding so I don't know why it's there.
Sometimes you get this in CSS where there is padding even though none was set but you can remove it simply with padding: 0
but I don't see how to do it here since I can't find a padding option for the Text
widget.
EDIT: The amount of padding changes with the size of the font. It seems to always contain a certain amount of padding, like a html H1
tag.
I found the solution myself in the end. It can be positioned using Stack
and Row
widgets. I found Row
works better than using Positioned
as the text can be centred using the Row
widgets.
body: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'0:00.00',
style: TextStyle(fontSize: 76),
),
],
),
Padding(
padding: EdgeInsets.only(top: 56.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Coke',
style: TextStyle(fontSize: 76),
),
],
),
),
],
)
It kind of works like the negative padding in CSS but actually it's the padding that moves the bottom text down rather than up since otherwise they occupy the same space.