将阴影添加到ClipRRect

Question

我想在Flutter中为ClipRRect添加阴影。我希望它看起来像这样：

但是当我尝试构建它时，我得到的东西是这样的：

阴影遍及整个框而不是ClipRRect区域。这是我的代码：

Column(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Color(0x54000000),
                spreadRadius: 10,
                blurRadius: 2,
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(250)),
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      end: Alignment.bottomCenter,
                      begin: Alignment.topCenter,
                      colors: [
                    Theme.of(context).primaryColor,
                    Color(0xff995DFF)
                  ])),
              height: 500,
              width: MediaQuery.of(context).size.width,
            ),
          ),
        )
      ],
    )

不知何故，阴影只需要位于ClipRRect上即可。谢谢您的帮助

Answer 1

发生这种情况是因为具有阴影的容器是默认形状的矩形...

将BorderRadius放置在这样的容器父亲装饰中：

        Column(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                //Here goes the same radius, u can put into a var or function 
                borderRadius: 
                    BorderRadius.only(bottomLeft: Radius.circular(250)),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x54000000),
                    spreadRadius:4,
                    blurRadius: 20,
                  ),
                ],
              ),
              child: ClipRRect(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(250)),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      end: Alignment.bottomCenter,
                      begin: Alignment.topCenter,
                      colors: [
                        Theme.of(context).primaryColor,
                        Color(0xff995DFF)
                      ],
                    ),
                  ),
                  height: 500,
                  width: MediaQuery.of(context).size.width,
                ),
              ),
            )
          ],
        ),