Flutter different color for different letters in a Text widget

Question

I have a use-case where I want to change the colour of a letter in a String inside a Text widget. Let's say that my String is "Flutter". On pressing the FloatingActionButton, I want the letter 'F' to change its colour, then on the next press of the FloatingActionButton, change the colour of letter 'l', then 'u', then 't', then 't', then 'e' and then finally 'r' with every FloatingActionButton press.

Please don't suggest having a different Text widget for every letter.

Answer 1

You can do this using a RichText widget and different TextSpans. You can read the documentation to familiarize yourself with it more. https://api.flutter.dev/flutter/widgets/RichText-class.html

Answer 2

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