'How to add a colored background which looks like an underline BENEATH the text in a sentence in Flutter?

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:

Solution 1:^[1]

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

Solution 2:^[2]

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

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	Kashif Niaz
Solution 2	Muhammad Noman

'How to add a colored background which looks like an underline BENEATH the text in a sentence in Flutter?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]