How to access the text in the textspan under Flexible - flutter integration tests

Question

I am trying to fetch the text(Calories) from the below widget.


return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Flexible(
              child: AutoSizeText.rich(
                TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                      text: NumberFormat.decimalPattern(locale).format(
                        calories!.round(),
                      ),
                    ),
                    // reduce spacing between amount and unit as defined in design
                    TextSpan(text: ' ', style: TextStyle(letterSpacing: -5.0)),
                    TextSpan(
                      text: _translate(AppLocalization.Caloriesunitkcal),
                      style: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: caloriesTextColor),
                    )
                  ],
                ),
                maxLines: 1,
                minFontSize: AdTheme.smallestUsedTextSize,
                group: _group1,
                style: Theme.of(context)
                    .textTheme
                    .headline3!
                    .copyWith(color: caloriesTextColor),
              ),
            ),
          ],
        ),
        AutoSizeText(
          description!,
          maxLines: 1,
          textAlign: TextAlign.center,
          minFontSize: AdTheme.smallestUsedTextSize,
          group: _group2,
          style: Theme.of(context).textTheme.bodyText1,
        )
      ],
    );
  }

The solution I tried to fetch the textspan is as below:


 var firstCell = find
          .descendant(
        of: find.byType(Flexible),
        matching: find.byType(TextSpan),
      )
          .evaluate()
          .whereType<Text>()
          .first;
      print(firstCell.data);

But this solution isnt allowing me to fetch the text in this text span.

Kindly help if someone has some insights on the same and has worked with fething similar kind of data.

score 0 · Answer 1 · answered Jan 20 '22 at 20:05

Your widget should react to a UI state, I would recommend to have those variables outside the widget itself, sho you have the UIModel outside of the widget, the objetive of declarative UI such as Flutter or Compose or SwiftUI is that you dont have the need to access data from the widgets directly, insted you use a UI model to paint exactly what you want on the screen, so I would think on something like this:

var calories = NumberFormat.decimalPattern(locale).format(calories!.round());

return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Flexible(
              child: AutoSizeText.rich(
                TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                      text: caloriesText,
                      ),
                    ),
                    // reduce spacing between amount and unit as defined in design
                    TextSpan(text: ' ', style: TextStyle(letterSpacing: -5.0)),
                    TextSpan(
                      text: _translate(AppLocalization.Caloriesunitkcal),
                      style: Theme.of(context)
                          .textTheme
                          .bodyText1!
                          .copyWith(color: caloriesTextColor),
                    )
                  ],
                ),
                maxLines: 1,
                minFontSize: AdTheme.smallestUsedTextSize,
                group: _group1,
                style: Theme.of(context)
                    .textTheme
                    .headline3!
                    .copyWith(color: caloriesTextColor),
              ),
            ),
          ],
        ),
        AutoSizeText(
          description!,
          maxLines: 1,
          textAlign: TextAlign.center,
          minFontSize: AdTheme.smallestUsedTextSize,
          group: _group2,
          style: Theme.of(context).textTheme.bodyText1,
        )
      ],
    );
  }

Hope it makes sense

Thank you for responding. However, my query is more of related to integration tests wherein I am trying to fetch the text from the text span and the solution I mentioned isn’t working. — user1873274, Jan 20 '22 at 20:39
You can add a key to that particular widget, and use find.byKey, have you tried it ? — Jav T, Jan 20 '22 at 20:51

How to access the text in the textspan under Flexible - flutter integration tests

1 Answers1