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.

creativecreatorormaybenot · Answer 1 · 2022-03-15T21:59:54.363

29

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

edited Mar 15 '22 at 21:59

answered Aug 27 '21 at 00:08

creativecreatorormaybenot

114,516
58
291
402

4

This is awesome! Thanks a lot for your contribution, this'll be great in stable! – joshpetit Sep 28 '21 at 11:21
1

This a great contribution. Can confirm this is on the stable channel in Flutter v2.10.1. – Lee Mordell Mar 15 '22 at 15:47
2

Nice! Can you also do `find.textContaining()`? :) – obe Mar 26 '22 at 18:27
Cool, saved myself from scratching my head – ammu Sep 29 '22 at 18:36

score 23 · Accepted Answer · answered Dec 14 '16 at 22:47

23

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.

answered Dec 14 '16 at 22:47

Ian Hickson

8,174
1
29
22

13

Thanks, the second solution will be like:`expect(find.byWidgetPredicate((Widget widget) => widget is RichText && widget.text.toPlainText() == 'Hello bold world'), findsOneWidget);` – GEPD Jul 18 '19 at 18:14
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')` – Andrei Tudor Diaconu Sep 17 '20 at 15:48

score 14 · Answer 3 · answered Mar 21 '20 at 17:31

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;
}

score 1 · Answer 4 · answered Feb 25 '20 at 17:15

1

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

answered Feb 25 '20 at 17:15

futbolpal

1,388
2
13
19

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

4 Answers4

Framework solution

`find.text()`

Linked