Is it possible to provide drop shadow to an PNG Image in flutter?

Question

I have designed it first in figma, where I had added a drop shadow to the butterfly just make to feel more interesting. I am wondering if I can achieve this in flutter too. I have tried Box Shadow widget but it gives shadow as square or rectangle.

Answer 1

You can achieve it from using Stack, BackdropFilter and duplicating image twice.

  Stack(
        children: [
          Image.asset(
            imgPath,
            color: Colors.black.withOpacity(0.7),
          ),
          BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 10.0,
              sigmaY: 10.0,
            ),
            child: Image.asset(
              imgPath,
            ),
          )
        ],
      ),

The first image will act as the shadow. You can adjust effect by changing the transparency value and sigma values

Answer 2

Try using the following code.

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset(
      imgPath,
      color: Colors.black.withOpacity(0.3),
    ),
    ClipRect(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Image.asset(
            imgPath,
          ),
        ),
      ),
    )
  ],
)