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 TextSpan s. 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!'),
    ],
  ),
)