Why does the same font size appear different in my app using Flutter?

Question

In the attached image, all text elements share the same font family and size settings. However, the font weights vary. Notably, the phrase "Sunny, What's on your mind?" positioned in the middle of the screen appears significantly larger than its designated size of 14 compared to all the other fonts on screen which have also been defined a value of 14. I'm seeking advice on how to resolve this issue and an explanation for the observed size discrepancy. #FlutterQuery

Tried to assign size 14 which is looking bigger then all the other text which have also been defined a size of 14.

Answer 1

By default, Flutter itself gives some text styling to all elements that you use in UI. You can override them by just adding some more lines in your ThemeData() class in your main.dart.

For example:

ThemeData(

appBarTheme: AppBarTheme(
titleTextStyle: TextStyle(fontSize: 20),
),
// ....
)

Now all texts in any scaffolds appbar title will get size 20, unless you change it directly in Text("", style: TextStyle(fontSize: 15)) itself. Hope I got you correct and helped.

Answer 2

Might be a little bit useful for us if you can provide some code snippets, but here are some steps you might try:

• Make sure all the texts had the same font weight. Apparently, different weights can make them look like they're on a seesaw. Set them all to FontWeight.normal to keep the peace.
• Sometimes, variations in line height can make text appear larger or smaller. Ensure that the line height is consistent across all text elements. You achieve this by wrapping them in a Container or Padding widget and specifying the height property. Here's an example of how I'd probably do it:

Container(
  height: 1.0, 
  child: Text(
    "Sunny, What's on your mind?",
    style: TextStyle(fontSize: 14),
  ),
)