flutter - 将阴影添加到 ClipRRect

Question

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



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



阴影穿过整个框而不是 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

发生这种情况是因为具有 shadown 的容器是一个 rect 作为默认形状...

卖出期权 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,
                ),
              ),
            )
          ],
        ),