CODEWITHSUNDEEP
flutteruser-interface
Dmitry Grin
Dmitry Grin

Reputation: 141

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

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.

enter image description here

Upvotes: 12

Views: 17581

Answers (3)

Tritacibo
Tritacibo

Reputation: 368

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)
))

Upvotes: 32

Jaydip Chothani
Jaydip Chothani

Reputation: 11

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
);

Upvotes: 1

quoci
quoci

Reputation: 3557

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,
            ),
          )
        ],
      ),
    ],
  ),
);

Upvotes: 3

Related Questions