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

user_17720285 0
Viewed 1399

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")
           ]
         )
         )),)
    ),
  ));
dart flutter android styles
3 Answers

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).

  1. Use Text.rich()
user_179911310

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:

enter image description here

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

enter image description here

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: enter image description here

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:

enter image description here

user_170326060

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.

user_115987590
Related