RichText not following correct colors

[DanMossa]

I have a RichText widget

  RichText(
    text: TextSpan(
        text: widget.profileStore.milesBetween.toString(),
        style: const TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18.0,
          //color: Color(0xff724c0b),
        ),
        children: const [
          TextSpan(
              text: "mi",
              style: TextStyle(
                  color: Colors.grey, fontSize: 12.0))
        ]),
  ),

The color is defaulting to white and not the normal color that occurs inside of Text widgets.

[rydmike]

Hi @DanMossa thanks for opening this issue.
Can you share a bit more information about your FlexColorScheme setup? Like did you opt-in on the opinionated sub themes and there the M3 styled TextTheme? Was this in dark or light theme mode?

Regardless of if you can share any more info. I will setup a test case and try to replicate the issue as well and get back to you so we can figure out together if it is a bug or config/setup related issue.

[rydmike]

Hi @DanMossa I reviewed your case. In your example you are using the RichText widget. It is a lower level widget that does not use any text theme, it must always be explicitly styled as explained here in Flutter docs: https://api.flutter.dev/flutter/widgets/RichText-class.html

If you want to use rich text that by default depends on the surrounding theme and its text theme, you should use Text.rich instead.

Here is an example based on your example without setting any theme color on the first number text:

class DemoRichText extends StatelessWidget {
  const DemoRichText({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: const TextSpan(
          text: '200.5',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
          ),
          children: <InlineSpan>[
            TextSpan(
                text: ' miles',
                style: TextStyle(color: Colors.grey, fontSize: 12.0))
          ]),
    );
  }
}


class DemoTextRich extends StatelessWidget {
  const DemoTextRich({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Text.rich(
      TextSpan(
        text: '200.5',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18.0,
        ),
        children: <InlineSpan>[
          TextSpan(
              text: ' miles',
              style: TextStyle(color: Colors.grey, fontSize: 12.0))
        ],
      ),
    );
  }
}

The first one DemoRichText always produces white numbered text by default, in both light and dark theme mode, this happens when using only Flutter standard themes without FlexColorScheme as well.

The 2nd widget DemoTextRich produces a surrounding themed text for the numbers, so it will be black in light theme and white in dark theme. In FlexColorScheme even when using M3 inspired style, its styles will also be correctly applied to it then.

Here the above two widgets are inserted into a UI for demonstration. First in light mode, where the number on the DemoRichText cannot be seen since it is white by default. However DemoTextRich is dark by default and can be seen:

Here are the same widgets in dark mode, now the DemoRichText can be seen, since it remained white as before, but so can also DemoTextRich since it automatically adjusted and followed the surrounding ambient text theme.

Hope this helps, the behavior you are seeing is actually expected and normal behavior with the widget you used.
Feel free to close the issue if the above answer is satisfactory and solved your issue.

Kind regards, Mike

[DanMossa]

@rydmike
Sorry for the late response, I haven't been near my computer.

You are an absolute wizard. You're 100% right and using Text.rich fixed the issue I was having. Thank you!