is there any way to make Text and Underline different colors in Flutter?

Question

Is there any way to make Text color in white while underline is in yellow?

RichText, TextSpan or Text seem like don't have opportunity to do this.

this what i'm looking for.

Answer 1

First you have to use the Material widget and within it you define a RichText , TextSpan and a Text .

Inside the Material widget you need to set underline color.

Material(
 child:RichText(),//input our need
);

Answer 2

You can use decorationColor: yourColor inside your Text attribute to change the underline's color. For example, if you want to underline all of your text:

Text("Your text",
      style: TextStyle(
             color: Colors.white
             decoration: TextDecoration.underline,
             decorationColor: Colors.yellow,
          ))

In case you want to underline only a part of text you have to use RichText with TextSpan. For example:

RichText(
   text: TextSpan(
   children: [
         TextSpan(
             text: "NOT UNDERLINED TEXT",
             style: TextStyle(
             color: Colors.white)
         ),
         TextSpan(
             text: "UNDERLINED TEXT",
             style: TextStyle(
             color: Colors.white
             decoration: TextDecoration.underline,
             decorationThickness: 2,
             decorationStyle: TextDecorationStyle.wavy))
              ], 
     style: TextStyle(color: Colors.yellow)
  ))

Answer 3

You can achieve this behaviour with a RichText .

RichText(
  text: TextSpan(
    text: 'You should only use this app when it is safe and legal to do so. ',
    style: TextStyle(color: Colors.white),
    children: [
      TextSpan(
        text: 'Please read our ',
        style: TextStyle(
          color: Colors.white,
        ),
        children: [
          TextSpan(
            text: 'Privacy Policy',
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.yellow,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          )
        ],
      ),
    ],
  ),
);