How to add a colored background which looks like an underline BENEATH the text in a sentence in Flut-CodePudding

The first word is underlined but if you look closely, the text overlaps a part of the colored shape/part. It is not just under the text.

Here is what I am trying to achieve:

Here's my current code:

                text: TextSpan(children: <TextSpan>[
                  TextSpan(
                    text: "Welcome",
                    style: TextStyle(
                        color: HSColors.darkBlue,
                        decoration: TextDecoration.underline,
                        decorationColor: HSColors.cream,
                        decorationThickness: 5.h,
                        fontSize: 30.sp,
                        fontWeight: FontWeight.w700,
                        height: 1.1,
                        letterSpacing: -0.03),
                  ),
                  TextSpan(
                    text: " to Veritas Monitoring Services",
                    style: TextStyle(
                        color: HSColors.darkBlue,
                        fontSize: 30.sp,
                        fontWeight: FontWeight.w700,
                        height: 1.1,
                        letterSpacing: -0.03),
                  )
                ]),
              ),

Here is what it currently looks like:

Moreover, if I use other text, it overlaps and looks like this:

CodePudding user response：

You need to work with decorationThickness value.

decorationThickness: 5.h,

I have lower the decorationThickness value to

decorationThickness: 0.2.h,

Here's the result on iPhone 12 simulator

CodePudding user response：

You can acheive this using Stack as shown below. Set the behind container's height and width as per your need. Thanks

Stack(
    alignment: Alignment.bottomLeft,
    children: [
        Container(
            height: 15,
            width: 130,
            color: Colors.amber,
        ),
        Text("Welcome",
            style: TextStyle(
                color: Colors.black,
                fontSize: 30,
                fontWeight: FontWeight.w700,
                height: 1.1,
                letterSpacing: -0.03),
        ),
    ],
),