添加阴影到 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,
                ),
              ),
            )
          ],
        ),