Add drop shadow to png image

Question

I want to add a drop shadow to a png image (image with alpha) in flutter.

I've already tried using BoxShadow, but I don't want to have a box shadow. I need a shadow that adapts to the png image.

Desired result:

Answer 1

First, you need two images, change the color of one them(your images should be transparent to make this happen) like:

child: Image.asset("assets/cat.png", color:Colors.black,),

Then put black one to the background using Stack and change its position to match shadow position.

Then add BackdropFilter to black one.

I think will work.

Code:

Stack(children: [
    Opacity(child: Image.asset(imagePath, color: Colors.black), opacity: 0.2),
    ClipRect(child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
        child: Image.asset(imagePath)))
])

Answer 2

Try this package:

https://pub.dev/packages/simple_shadow

It's very configurable, and this is an example:

Container(
              child: SimpleShadow(
                child: Image(
                  width: 70.0,
                  height: 70.0,
                  image: NetworkImage(logoUrl),
                  semanticLabel: title,
                ),
                opacity: 0.25, // Default: 0.5
                color: Colors.black, // Default: Black
                offset: Offset(3, 3), // Default: Offset(2, 2)
                sigma: 7, // Default: 2
              ),
            ),