Flutter Stack的孩子在使用线性渐变时是透明的

Question

我正在使用堆栈，其中节省 60% 的小部件位于具有白色背景的容器顶部。我在折扣容器上使用渐变。我希望渐变是纯色的，但正如您在图像中看到的那样，它是半透明的，我们可以看到它下面的白色背景。

我的堆栈代码是：

 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 小部件：

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

为了获得坚实的背景，我可以用 Container 包装 buildDiscountTextWidget 并提供相同的渐变并执行 2.3 次，但我认为这不是正确的方法。

here is the screen shot of the widget

Answer 1

你只需要从Colors.lightBlue.withOpacity(0.8)的末尾删除.withOpacity(0.8)

Answer 2

如下更改 buildDiscountText 小部件：

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