Flutter lint rule to prefer Text.rich over RichText

[IchordeDionysos]

prefer_text_over_rich_text

Description

Avoid using Text.rich() over RichText.

Details

RichText does not automatically scale it's font size based on device text scale settings.
Rich.text does adjust to the text scale factor settings on the device making it the preferred option.

Kind

Helps engineers build accessible Flutter apps.

Bad Examples

Widget build(BuildContext context) {
  return RichText(
    text: TextSpan(
      text: "Here is some text.",
      style: Theme.of(context).textTheme.bodyText2,
    ),
  );
}

Widget build(BuildContext context) {
  return RichText(
    text: TextSpan(
      text: "Here is some text.",
      style: Theme.of(context).textTheme.bodyText2,
      children: [
        TextSpan(
          text: " (some more text)",
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ],
    ),
  );
}

Good Examples

Widget build(BuildContext context) {
  return Text.rich(
    TextSpan(
      text: "Here is some text.",
      style: Theme.of(context).textTheme.bodyText2,
    ),
  );
}

Widget build(BuildContext context) {
  return Text.rich(
    TextSpan(
      text: "Here is some text.",
      style: Theme.of(context).textTheme.bodyText2,
      children: [
        TextSpan(
          text: " (some more text)",
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ],
    ),
  );
}

Discussion

From a accessibility-by-design/accessibility-by-default perspective, this lint would improve the developers and users experiences greatly.

There may be good reasons to use RichText if you need full control over it. However, in the majority of the cases Text.rich is the preferred option.
Engineers may not be aware of this fact, making this lint a great option to help engineers build accessible apps.

We have faced this issues in an internal app, and instead of having to educate people not to use RichText or to keep an eye out for it in PRs.
Having this automatically checked would be super helpful.

Reference: flutter/flutter#61452 (comment)

Discussion checklist

• List any existing rules this proposal modifies, complements, overlaps or conflicts with.
• List any relevant issues (reported here, the SDK Tracker, or elsewhere).
• If there's any prior art (e.g., in other linters), please add references here.
• If this proposal corresponds to Effective Dart or Flutter Style Guide advice, please call it out. (If there isn't any corresponding advice, should there be?)
• If this proposal is motivated by real-world examples, please provide as many details as you can. Demonstrating potential impact is especially valuable.

[chunhtai]

yeah, I can see the this lint to be useful, but we shouldn't add this to the flutter_lints since the Text.rich isn't a complete replacement for RichText.

[bwilkerson]

I assume that you're rightly concerned about false positives.

Could we statically determine when it's necessary to use RichText in order to remove false positives? If not, then I suspect that we won't be adding this lint at this time.

[IchordeDionysos]

@chunhtai correct me if I'm wrong but there is only one property unique to RichText and that's selectionRegistrar.

If we would detect whether someone is using that property and then not suggesting to use Text.rich would you be happy to add that lint to flutter_lints?

The other differences is that RichText provides defaults and it actually provides defaults like TextScaler.noScaling breaking accessibility if not considered with care, which is exactly why I'm proposing this lint rule.

Are there other legitimate use cases besides selectionRegistrar?
Could an option be that a user of RichText explicitly acknowledges the drawbacks of RichText by ignoring the lint?

---

RichText({
  required InlineSpan text,
  Key? key,
  TextAlign textAlign = TextAlign.start,
  TextDirection? textDirection,
  bool softWrap = true,
  TextOverflow overflow = TextOverflow.clip,
  double textScaleFactor = 1.0,
  TextScaler textScaler = TextScaler.noScaling,
  int? maxLines,
  Locale? locale,
  StrutStyle? strutStyle,
  TextWidthBasis textWidthBasis = TextWidthBasis.parent,
  TextHeightBehavior? textHeightBehavior,
  Color? selectionColor,

  // Unique for RichText
  SelectionRegistrar? selectionRegistrar,
})

const Text.rich(
  InlineSpan textSpan, {
  Key? key,
  TextAlign? textAlign, // different default
  TextDirection? textDirection,
  bool? softWrap, // different default
  TextOverflow? overflow, // different default
  double? textScaleFactor, // different default
  TextScaler? textScaler, // different default
  int? maxLines,
  Locale? locale,
  StrutStyle? strutStyle,
  TextWidthBasis? textWidthBasis,  // different default
  TextHeightBehavior? textHeightBehavior,
  Color? selectionColor,

  // Unique for Text.rich
  TextStyle? style,
  String? semanticsLabel,
})