在颤动中剪辑之前向蒙版添加框阴影

Question

我正在尝试将下面的图像渲染为颤动的小部件。

在 Figma 中，这个 Widget 是使用图像和蒙版制作的。 图像过大并超出了小部件的边界。 蒙版包含一个边框半径和一个投影。 边框半径形成硬轮廓，阴影在蒙版上绘制渐变 应用蒙版后，图像会使用自身作为投影淡化。

我在flutter中尝试过使用几种方法来实现这个效果，但都没有成功。

1. 堆栈中的背景滤镜模糊图像
2. 具有不同混合模式的 ShaderMask 渐变
3. 自定义 BoxShadow 画家

如果有人有任何解决方案，将不胜感激。

Answer 1

您可以使用此代码，它以我知道的愚蠢方式解决它:) 但我找不到其他方式

Stack(
          children: [
            Center(
              child: Container(
                height: width*.6,
                width: width*.97,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstIn),
                        image: AssetImage('assets/images/138728.jpg')
                    ),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            ColorFiltered(
              colorFilter: ColorFilter.mode(Color(0xF2F2F2).withOpacity(0.8), BlendMode.srcOut),
              child: Stack(
                fit: StackFit.expand,
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xF2F2F2),
                        backgroundBlendMode: BlendMode.srcOut), // This one will handle background + difference out
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: width*.5,
                      width: width*.9,
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Center(
              child: Container(
                height: width*.6,
                width: width*.97,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0xffF2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 3,
                width: width*.97 - 3,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x80F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 6,
                width: width*.97 - 6,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x60F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 9,
                width: width*.97 - 9,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x40F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
            Center(
              child: Container(
                height: width*.6 - 12,
                width: width*.97 - 12,
                decoration: BoxDecoration(
                  border: Border.all(color: Color(0x40F2F2F2),width: 4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
                ),
              ),
            ),
          ],
        )