flutter - 如何在 flutter 中向圆形容器添加线性渐变？

Question

如何在 flutter 中向圆形容器添加线性渐变。这是我的代码。这确实应用了渐变，但它看起来像圆形容器顶部的矩形容器。

Container(
height:300,
 width: double.infinity,
            padding: EdgeInsets.all(10.0),
            margin: EdgeInsets.only(top: 8.0, bottom: 0, left: 8.0, right: 8.0),
            decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("assets/images/img.png"),
                ),
                borderRadius: BorderRadius.circular(15.0),
                color: Colors.black),
child:Container(
decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black.withOpacity(0.5),
                    Colors.black.withOpacity(0.7),
                  ],
                ),
child:MoreWidgets(),
),
),

Answer 1

如果您想渐变覆盖所有图像，您应该从容器中删除填充，然后添加 borderRadius到第二个容器，如以下代码:

Container(
        height: 300,
        width: double.infinity,
        margin: EdgeInsets.only(top: 8.0, bottom: 0, left: 8.0, right: 8.0),
        decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage("assets/images/img.png"),
            ),
            borderRadius: BorderRadius.circular(15.0),
            color: Colors.black),
        child: Container(
          child: MoreWidgets(),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            gradient: LinearGradient(
              colors: [
                Colors.black.withOpacity(0.5),
                Colors.black.withOpacity(0.7),
              ],
            ),
          ),
        ),
      ),