如何在颤动中向圆形容器添加线性渐变？答案

【问题标题】：How to add linear gradient to a rounded container in flutter?如何在颤动中向圆形容器添加线性渐变？
【发布时间】：2020-12-27 07:41:41
【问题描述】：

如何在 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(),
),
),

【问题讨论】：

在外部Container 中尝试clipBehavior - 但老实说，你为什么不在外部Container 中使用gradient - 为什么你需要内部Container？
当我在外部容器中添加渐变时它不起作用
图片下方添加渐变
好的，我错过了 DecorationImage... - 仍然 clipBehavior 应该在外部 Container 中工作
我该如何实现，我尝试了 googlng 但可以理解，你能帮忙吗？

标签： flutter dart flutter-layout

【解决方案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),
              ],
            ),
          ),
        ),
      ),

【讨论】：