0

I'm working with flutter recently. When I layout the text, I usually put a Text into a Container and set the distance between components. My example code and the pictures will be below. However, I found the Text content wouldn't close to the edge, which makes the distance I set is not exactly accurate. So how should I solve the problem, or is there any better solution in my situation? the text content won't close to the edge

Container(
           color: Colors.red,
           width: double.infinity,
           height: ScreenAdapt.heightToDp(32),
           child: Text(
             'some text content',
             style: MyTextStyle.level3
           ),
          ),
byhuang1998
  • 377
  • 1
  • 5
  • 25
  • Because ```Text()``` widget has a default padding. Thats why its not exactly at the edge – Raine Dale Holgado Oct 30 '20 at 02:40
  • Take a look at this question to read more about this: https://stackoverflow.com/questions/57008822/flutter-how-do-i-remove-unwanted-padding-from-text-widget – encubos Oct 30 '20 at 02:50

1 Answers1

2

In short, you shouldn't, the extra space is for the safety margin for other characters.

There are unsafe solutions, however. Be cautious. Use only if

  1. You have explicitly declared the fontFamily.
  2. You manually eyeballed that the font works on every platform (Specifically, Web).
  3. You have fully decided it's completely OK to break other characters and other fonts.

If TextStyle.height is not null, then it will force the line height to be exactly fontSize * height. fontSize is the EM-square in typography. For typical fonts, their ascent and descent of latin characters USUALLY do not exceeds the height range of a EM-square. So setting TextStyle.height to something slightly larger than 1.0 USUALLY clip the line height without biting into the character.

See Flutter's documentation

For Roboto, the sweet spot should be somewhere around 1.05~1.10 (Disclaimer: I am no font experts.)

enter image description here

Try this out

Container(
  color: Colors.red,
  child: Text(
    'asdfdsadfsadfasdf',
    style: TextStyle(fontFamily: 'Roboto', fontSize: 50, height: 1.0)
  ),
),

As a last resort, you can always resort to something like a OverflowBox and either eyeball some values, or extract the metadata of the font and set the precise ascent and descent.

First_Strike
  • 1,029
  • 1
  • 10
  • 27