Flutter how do I remove unwanted padding from Text widget?

Hasen

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.

enter image description here

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.

Hasen

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.

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do I remove Flutter IconButton big padding?

How do I only apply padding to the text in a TextField in Flutter?

How do I allow users to select text from a Text widget?

How do I remove unwanted, untrack directories from my git branch?

Remove padding from Flutter PopupMenuButton

Flutter - how remove padding from BottomNavigationBar?

How do I remove a color from the GTK scale widget?

How do I remove an unwanted location from Modern UI Weather?

How to Remove Unwanted Padding or Margin?

How do I remove unwanted space over my signature?

How to remove unwanted padding inside the text label?

Remove unwanted text from cell

How do I remove a fade animation from a hero widget?

How do I remove unwanted classes and tags from newspaper3k object?

How do I remove unwanted json3 module from my node_modules?

How do I limit the number of words in a Text Widget in Flutter?

How do i get text from an Entry widget?

How do I remove/change the padding from "display: flex;"

How do I save data from a stateful widget in Flutter?

How do I correct the alignment and remove unwanted space

How to remove padding from Text button?

How do I align a TextFormField and Text widget inside a row in Flutter?

Remove Flutter HTML widget's default padding

How do I remove the unwanted text from bibliography in natbib?

How to remove curly braces from a text widget

how to remove unwanted text from retrieving title of a page using python

How to remove padding from TextButton and place it under widget Flutter

How do i correctly initialise a variable from a stateful widget to another widget in flutter and maintain state?

How do I remove both rows from a sample duplicate if one of them has an unwanted value?