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.

Answer 1

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