'How can i dynamically change color of certain words of a paragraph in a Text Widget in flutter

Suppose you are given two Strings. One contains the words to be colored, and other contains the paragraph. example:

List words =["cow","milk","cattle" ];

String paragraph = "Cattle, or cows (female) and bulls (male), are large domesticated cloven-hooved herbivores. They are a prominent modern member of the subfamily Bovinae, are the most widespread species of the genus Bos, and are most commonly classified collectively as Bos taurus.";

I need those words in paragraph to be colored or linkable Text. help plz

Such As like the picture

stringlistfluttercolorstextspan


Solution 1:[1]

Checkout Highlight Text. Here is a small example how you can achieve the effect you desired.

Map<String, HighlightedWord> words = {
    "cow": HighlightedWord(
        textStyle: textStyle,
    ),
    "milk": HighlightedWord(
       
        textStyle: textStyle,
    ),
    "cattle": HighlightedWord(
       
        textStyle: textStyle,
    ),
};

Your Text

TextHighlight(
    text: text, // Your text
    words: words, // Your highlighted words
);

Solution 2:[2]

You need to split all the words from the paragraph and then dynamically assign Richtext > TextSpan for each word after checking from your list.

Solution 3:[3]

Use RichText and TextSpan just like this

RichText( 
  text: TextSpan( 
    style: TextStyle(color: Colors.black, fontSize: 16), 
    children: [ 
      TextSpan(text: "I accept the "), 
      TextSpan(text: "term & condition", style: TextStyle(color: Colors.blue)), 
      TextSpan(text: "and certify that answer are true."), 
    ], 
  ), 
),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 quoci
Solution 2 Mr.Paul
Solution 3

Related Questions