0

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.

enter image description here

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.

2
  • i dont think you will do that using existing widgets - the exception is a CustomPaint
    – pskink
    Jan 11, 2021 at 7:26
  • Yeah most likely can't be done using Flutter widgets out of the box but it should definitely be possible in flutter.. :)
    – David Rees
    Jan 11, 2021 at 12:53

1 Answer 1

3

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

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.