Using the same TextStyle on Text and RichText renders text with different font size

[kostaa]

Maybe I am missing something but when I use the same TextStyle on text rendered with the RichText the text size is smaller than when rendered with the Text. Is that intentional?

[jason-simmons]

They shouldn't be different. Do you have an example where this happens?

[kostaa]

This is happening when a list of items is rendered using the Text widget. The user can switch to a search mode at which point all items are rendered with theRichText widget and the matching text is highlighted. The size of the text rendered with the RichText is smaller. Both widgets are using the same TextStyle.

This is embedded in a large(ish) app currently. I will try to extract this at some point this week.

[Hixie]

What is your system-wide text scale setting?

iirc, Text scales with the OS text scale setting, while RichText does not.

[kostaa]

I do not have any explicit text scale settings.

[kostaa]

I have managed to knock up a quick app to demonstrate the issue but this time the items rendered with the RichText are not visible at all. Maybe I have messed up something but I honestly cannot see what it could be.

Text RichText Issue

Flutter 0.1.3-pre.19 • channel master • https://github.com/flutter/flutter.git
Framework • revision d260294752 (17 hours ago) • 2018-02-15 09:13:56 -0800
Engine • revision 0f3a8cef60
Tools • Dart 2.0.0-edge.0fd6aa87a37023d9691cf50866214c1235dab2d1

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (on Microsoft Windows [Version 10.0.16299.248], locale en-GB, channel master)
[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[√] Android Studio (version 3.0)
[√] IntelliJ IDEA Community Edition (version 2017.3)
[√] VS Code (version 1.19.3)
[√] Connected devices

[jason-simmons]

The RichText widgets are not visible because the RichText is defaulting to white colored text. They will match the Text if textStyle specifies color: Colors.black.

With that change, the fonts for Text and RichText look identical on my setup.

[kostaa]

Hmm white colored text that is rather unintuitive. Why not the same default colour as the Text? Anyway I have changed it and there is a difference on my old Android phone but on the simulator they are the same.

DeviceInfo{
	"platform": "Android",
	"version.securityPatch": "2017-04-01",
	"version.sdkInt": 23,
	"version.release": "6.0.1",
	"version.previewSdkInt": 0,
	"version.incremental": "A300FUXXS1CQD5",
	"version.codename": "REL",
	"version.baseOS": "samsung/a3ultexx/a3ulte:6.0.1/MMB29M/A300FUXXU1CPH3:user/release-keys",
	"board": "MSM8916",
	"bootloader": "A300FUXXS1CQD5",
	"brand": "samsung",
	"device": "a3ulte",
	"display": "MMB29M.A300FUXXS1CQD5",
	"fingerprint": "samsung/a3ultexx/a3ulte:6.0.1/MMB29M/A300FUXXS1CQD5:user/release-keys",
	"hardware": "qcom",
	"host": "SWDG2907",
	"id": "MMB29M",
	"manufacturer": "samsung",
	"model": "SM-A300FU",
	"product": "a3ultexx",
	"supported32BitAbis": [
		"armeabi-v7a",
		"armeabi"
	],
	"supported64BitAbis": [],
	"supportedAbis": [
		"armeabi-v7a",
		"armeabi"
	],
	"tags": "release-keys",
	"type": "user",
	"isPhysicalDevice": true
}

[Hixie]

Hmm white colored text that is rather unintuitive. Why not the same default colour as the Text?

The default background is black, so we default the foreground to white.

When you use MaterialApp, it changes the background to white, and sets a DefaultTextStyle to set the default color to black.

Text just uses the DefaultTextStyle.

RichText does not know about DefaultTextStyle -- its purpose is actually to be how Text implements DefaultTextStyle, basically.

[Hixie]

We have no idea what could be causing this problem.

Could you try running debugDumpApp() and debugDumpRenderTree() from your application after the text is on the screen and attaching the resulting dumps to this issue?

[kostaa]

Here they are as requested:

debugDumpApp.zip
debugDumpRenderTree.zip

[Hixie]

@kostaa Ok well I see the problem: the Text widgets are setting the textScaleFactor to 1.2. This comes from the MediaQuery at the root of the widget tree, which sets the textScaleFactor to 1.19. Normally that happens because there's a system text scaling factor applied in the Android settings. Are you sure you don't have a text scale factor applied?

[kostaa]

@Hixie Not as far as I know (the app I am using to demonstrate this issue is attached to the sixth message from the top so you might want to double check that).

I suspect this might be related to the size of the screen as I deliberately use an old Android phone with a small screen for for testing. If I run this in the emulator (I cannot remember the setup off top my head) I do not see this.

[Hixie]

Maybe that version of Android sets a scale factor for you?

[kostaa]

I thought that the whole UI layer was Flutter code. Is there a way I can check this?

[Hixie]

Text applies the MediaQuery scale factor, which is initialized from the Android system scale factor; RichText doesn't. They're both in Dart, though.

To see if your Android is applying a scale factor, you could write a pure Java app that uses Android APIs to read the scale factor (or find one in the app store).

[zoechi]

@kostaa is this still an issue?

[kostaa]

Will check and come back to you by the end of the week.

[kostaa]

@zoechi - yes the problem is still there. These are the Dart/Flutter versions I am running with:

The mobile I tested with is the same as mentioned in the post above.

[zoechi]

@kostaa thanks for the update!

[Niek]

This is still an issue in Flutter 1.2

[Hixie]

@Niek what exactly is it you are seeing? Is the scale factor as seen by Flutter different than the scale factor as exposed by Android?

[Niek]

@Hixie I don't see the mismatched font sizes anymore. But I do think it's strange that in the following code RichText doesn't seem to use the parent DefaultTextStyle like Text does.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Testing Text and RichText',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Testing Text and RichText'),
        ),
        body: new DefaultTextStyle(
            style: new TextStyle(
                inherit: true,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
                decorationStyle: TextDecorationStyle.dotted,
                color: Colors.black),
            child: new Center(
                child: new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  Text('This is a Text field'),
                  RichText(
                      text: TextSpan(
                          text: 'And this is a RichText field',
                          style: DefaultTextStyle.of(context).style)),
                ]))),
      ),
    );
  }
}

[andyduke]

I had the same problem, with the increased size of the text in the Android OS.

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

If I pass MediaQuery.of(context).textScaleFactor to RichText(textScaleFactor), everything becomes the same.

[Hixie]

@Niek The purpose of Text is to apply DefaultTextStyle and the given styles and text and create a corresponding RichText widget. RichText is the low-level implementation of Text. It should probably have been called RawText.

[localpcguy]

That last comment @Hixie was really helpful in determining the issues I've been having with RichText! I do wonder if a rename could be useful, deprecating RichText or transitioning it to be similar to Text.rich, since that appears to be what people expect based on the name.

For others that may come across this issue, It appears that most instances where someone would use RichText it could be replaced with Text.rich (adjusting for the slightly different APIs that the two widgets use). See #15594 for more details.

[Hixie]

Renaming it is part of #24722, which is my list of things we would do if they weren't so breaking.

[Hixie]

@kostaa Is the scale factor as seen by Flutter different than the scale factor as exposed by Android?

[no-response]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

[pdefuns]

Facing the same issue.

With the "solution" of @andyduke it works fine (passing textScaleFactor to RichText).
From my point of view, this should be the default and should not be set by hand..

[febg11]

My rich text is smaller than a text with same font size even with the

textScaleFactor: MediaQuery.of(context).textScaleFactor,

solution. This is using android.

[jayabrown]

Looks like there's a scaling bug with RichText. The best option is to change RichText to Text.rich.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.