Is there an easy way to find particular text built from RichText in a Flutter test?

Question

For example, I may have one RichText in current widget tree, that looks like

RichText(
 text: TextSpan(
   text: 'Hello ',
   style: DefaultTextStyle.of(context).style,
   children: <TextSpan>[
     TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
     TextSpan(text: ' world!'),
   ],
 ),
)

I try to use find.text('Hello bold world!') but it doesn't work because it's not a Text.

Erine

Answer 1

Simplest solution is to put a key on the RichText and read it that way.

If that's not a good fit for whatever reason, you can use find.byWidgetPredicate and pass a function that matches RichText widgets whose text.toPlainText() returns the string you want.

Unaware

Thanks, the second solution will be like:expect(find.byWidgetPredicate((Widget widget) => widget is RichText && widget.text.toPlainText() == 'Hello bold world'), findsOneWidget); – Avaricious

In my case, widget.text.toPlainText() actually contained 0-width space characters at the end (probably because of empty spans). The only way I got it to work was to use .startsWith : (widget) => widget is RichText && widget.text.toPlainText().startsWith('hello') – Gadmon

Answer 2

Framework solution

I have recently contributed this feature to the Flutter framework, i.e. to the built-in finders.

find.text()

You can now enable a findRichText parameter, which will then also find standalone RichText widgets:

find.text(
  'Hello bold world!',
  findRichText: true,
)

Yachtsman

This is awesome! Thanks a lot for your contribution, this'll be great in stable! – Hessney

This a great contribution. Can confirm this is on the stable channel in Flutter v2.10.1. – Scofield

Nice! Can you also do find.textContaining()? :) – Orthographize

Cool, saved myself from scratching my head – Causation

Answer 3

Here's the find.byWidgetPredicate call.

find.byWidgetPredicate((widget) => fromRichTextToPlainText(widget) == 'Hello bold world!')

Here's the fromRichTextToPlainText helper function. Pass it the RichText widget, it will return the plain text.

String fromRichTextToPlainText(final Widget widget) {
  if (widget is RichText) {
    if (widget.text is TextSpan) {
      final buffer = StringBuffer();
      (widget.text as TextSpan).computeToPlainText(buffer);
      return buffer.toString();
    }
  }
  return null;
}

Marden

Answer 4

I solved for this by digging into the widget a bit more manually

    final richTextWidget = tester.element(richTextFinder).widget as RichText;
    print(richTextWidget.text.children);

With the children, I can assert they are generated as expected

Melmon

Answer 5

You can simply achieve this by enabling findRichText: true like this,

expect(find.text("${input.newItem.price.toPrice}/${weight!.unit}", findRichText: true), findsOneWidget);

Ahrens