How to highlight every word in a text in a squence in Flutter?

Question

I want to highlight a text in Flutter but I want to highlight every word in the text in a sequence. So, the first word gets highlighted(and the previous gets back to normal i.e not highlighted) then the second one then the third..etc. How can I do something like this in Flutter.

#Edit I want to animate it so that the highlight walks in a sequence. For example, the first word gets highlighted with yellow then it returns back to normal and then the second word gets highlighted and then it returns back to normal and so on... I hope you got it.

Answer 1

You can try:

class HighlightedTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String text = "Hello, this is a highlighted text in Flutter";
    List<String> textList = text.split(" ");
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            children: textList.map((text)  {
              var index = textList.indexOf(text);
              if (index % 2 == 0) {
                return TextSpan(text: text, style: TextStyle(background: Paint()..color = Colors.cyan));
              }
              return TextSpan(text: text, style: TextStyle(background: Paint()..color = Colors.limeAccent));
            }).toList() ,
          ),
        ),
      ),
    );
  }
}

That will give you: