Need to show display a background of transparent color between these two text widgets like the image below. tried enclosing with box decoration property but it gives bottom overflow error. Need to highlight this text with transparent background. Please help. Here is code:

Column(
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(8.0, 120, 0, 10),
        child: Text("30 % off on first buy".tr,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            )),
      ),
    ),
    Container(
      decoration: BoxDecoration(
        color: const Color(0x9CFFFFFF),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Padding(
          padding: EdgeInsets.fromLTRB(8.0, 170, 0, 10),
          child: Text("Get Started Now".tr,
              style: TextStyle(
                color: Color(0xFFADADAD),
                fontSize: 18,
              )),
        ),
      ),
    ),
  ],
),

CodePudding user response：

The Text widgets are having large padding like 170. If you like to place widget, you can use Stack widget.

return Scaffold(
  body: Stack(
    children: [
      Align(
        alignment: Alignment.bottomLeft,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8.0, 10, 0, 10),
          child: Text("30 % off on first buy",
              style: const TextStyle(
                // color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              )),
        ),
      ),
      Align(
        alignment: Alignment.bottomRight,
        child: Container(
          decoration: BoxDecoration(
            color: const Color(0x9CFFFFFF),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Padding(
            padding: EdgeInsets.fromLTRB(8.0, 10, 0, 10),
            child: Text(
              "Get Started Now",
              style: TextStyle(
                // color: Color(0xFFADADAD),
                fontSize: 18,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

Also you can use single Row with two text widget.

CodePudding user response：

I don't know the rest of your code, but the second Container has more than 170 height because of your padding.

give a height value and change padding and you should be fine:

          Column(
            children: [
              const Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: EdgeInsets.fromLTRB(8.0, 120, 0, 10),
                  child: Text("30 % off on first buy",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      )),
                ),
              ),
              Container(
                height: 50, //<-added height
                decoration: BoxDecoration(
                  color: const Color(0x9CFFFFFF),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.all(10),//<-changed padding to make sure text is shown
                    child: Text("Get Started Now",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 18,
                        )),
                  ),
                ),
              ),
            ],
          ),