Flutter Stack's child is transparent while using linear gradient - flutter

Question

I am using a stack, where the save 60% off widget is on top of the container with white background. I am using gradient on the discount container. I want the gradient to be solid , but as you can see in the image, it is semi-transparent and we can see the white background under it.
My stack code is:
Container(
width: width * 0.38,
height: 250,
child: Stack(
children: [
Positioned(
top: 20,
child: InkWell(
onTap: () {},
child: Container(
width: width * 0.38,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 35.h),
buildProductPrice(product, _intros),
buildCheckMark(product),
],
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: buildDiscountText(product, _intros)),
],
),
);
buildDiscountText widget:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue.withOpacity(0.8),
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);
To get solid background I could wrap buildDiscountTextWidget with Container and provide same gradient and do this 2,3 times but I don't think that is the proper way.
here is the screen shot of the widget

Answer 1

You just need to remove .withOpacity(0.8) from the end of Colors.lightBlue.withOpacity(0.8)

Answer 2

Change buildDiscountText widget as follows:
return Container(
height: 40,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.lightBlue, //remove opacity
Color(0xffCE41FD),
],
end: Alignment.centerRight,
begin: Alignment.centerLeft,
),
borderRadius: BorderRadius.circular(20)),
child: Text(
'SAVE $_rounded %',
style: _saveTextStyle,
),
);