dart - Adding a box shadow to a mask before clipping in flutter

Question

I am trying to render the below image as a Widget in flutter.

In Figma, this Widget is made using an image and a mask. The image is oversized and extends past the bounds of the widget. The mask contains a border radius and a drop shadow. The border radius makes the hard outline and the drop shadow paints a gradient onto the mask When the mask is applied the image fades using it's self as the drop shadow.

I have tried using a few methods to achieve this effect in flutter but haven't succeeded.

1. Backdrop Filter Blur image in a stack
2. ShaderMask Gradient with different blend modes
3. Custom BoxShadow painter

If anyone has any solutions it would be much appreciated.

Answer 1

you can use this code, it solve it in silly way I know :) but I can't find another way

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)),
                ),
              ),
            ),
          ],
        )