font size issue in flutter by using `Text.rich()` or `RichText`

Question

I used Text.rich() or RichText with font size 25. but the size of RichText is looking greater than the Text.rich() please tell me why the size is different, I specified font Size 25 for both widgets.

This code showing small font size:

runApp(MaterialApp(
    theme: ThemeData(fontFamily: "nunito"),
    home: Scaffold(
      appBar: AppBar(title: Text("PUROGRAMMER")),
      body: Center(child: Container(
        child: Text.rich(
         TextSpan(
           style: TextStyle(fontSize: 20, color: Colors.grey),
           children: [
                  TextSpan(text: "Click"),
                  TextSpan(text: " + ", style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
                  TextSpan(text: "to add")
           ]
         )
         )),)
    ),
  ));

And this is showing large font size:

runApp(MaterialApp(
    theme: ThemeData(fontFamily: "nunito"),
    home: Scaffold(
      appBar: AppBar(title: Text("PUROGRAMMER")),
      body: Center(child: Container(
        child: TRichText(
         text: TextSpan(
           style: TextStyle(fontSize: 20, color: Colors.grey),
           children: [
                  TextSpan(text: "Click"),
                  TextSpan(text: " + ", style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
                  TextSpan(text: "to add")
           ]
         )
         )),)
    ),
  ));

Answer 1

Also one difference is when using a SelectionArea, a RichText didn't allow by default to select its TextSpan while a Text.rich did.

Answer 2

In the Text widget's constructor, the textScaleFactor parameter is not initialized. In the build method, if textScaleFactor is not initialized, then MediaQuery.textScaleFactorOf(context) is used.

In the RichText widget's constructor, the parameter textScaleFactor = 1.0, in the createRenderObject/updateRenderObject methods, it is used directly, without a fallback to MediaQuery.textScaleFactorOf(context).

Bottom line, you can solve this problem like this:

1. Use

final tsf = MediaQuery.of(context).textScaleFactor

to

RichText(textScaleFactor: tsf).

2. Use Text.rich()

---

Update: textScaleFactor is marked as deprecated with this comment:

Use textScaler instead. Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. This feature was deprecated after v3.12.0-2.0.pre.

In addition, there are now optimized MediaQuery.of calls for each tracked field. So now you can do this:

@override
Widget build(BuildContext context) {
  final textScaler = MediaQuery.textScalerOf(context);
  return RichText(text: ..., textScaler: textScaler);
}

Answer 3

I also get this issue with RichText widget in my app i have set the font family in my ThemeData but RichText is not picking that font so i externally give the font family to RichText

TextStyle(
    fontFamily: "Serif",
    fontSize: 30,
    color: Colors.black,
    fontWeight: FontWeight.w400,
  )

In RichText your style should contain your font family

Or else You can use Text.Rich it is working as expected.

Answer 4

In RichText if you don’t explicitly define all attributes of text style, it will copy the style regarding the position of text, for instance in a Column in a Scaffold with white background define a Text.Rich and RichText, you’ll see that RichText is painted in white; or if you declare a style only for the text attribute the children TextSpans will copy that as well. So the difference you see is most probably because of their fontWeight, define a same for both and see if they look identical.

Update after the code snippet is provided:

This is what I get running your two containers in a column:

but if you remove the color: Colors.grey for both widgets this is what I get (TextRich becomes white):

but if you put them in an appbar like this:

AppBar(
    
    title: Column(
      children: [
        Container(
          child:
              Text.rich(TextSpan(style: TextStyle(fontSize: 20), children: [
            TextSpan(text: "Click"),
            TextSpan(
                text: " + ",
                style: TextStyle(
                    color: Colors.red, fontWeight: FontWeight.bold)),
            TextSpan(text: "to add")
          ])),
        ),
        Container(
          child: RichText(
              text: TextSpan(style: TextStyle(fontSize: 20), children: [
            TextSpan(text: "Click"),
            TextSpan(
                text: " + ",
                style: TextStyle(
                    color: Colors.red, fontWeight: FontWeight.bold)),
            TextSpan(text: "to add")
          ])),
        )
      ],
    ),
  ),

this is what you get:

as you can see they both turn white since it's the default text color of the appbar, but they have different fontWeight and thats because RichText copies the default fontWeight of appbar style, but if you declare fontWeight in the child textstyle like this:

AppBar(
    title: Column(
      children: [
        Container(
          child: Text.rich(TextSpan(
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              children: [
                TextSpan(text: "Click"),
                TextSpan(
                    text: " + ",
                    style: TextStyle(
                        color: Colors.red, fontWeight: FontWeight.bold)),
                TextSpan(text: "to add")
              ])),
        ),
        Container(
          child: RichText(
              text: TextSpan(
                  style:
                      TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  children: [
                TextSpan(text: "Click"),
                TextSpan(
                    text: " + ",
                    style: TextStyle(
                        color: Colors.red, fontWeight: FontWeight.bold)),
                TextSpan(text: "to add")
              ])),
        )
      ],
    ),
  ),

this is what you get: