Add drop shadow to png image

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

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

I was facing this same issue with SVG images, so I developed a solution for any widget, I hope it help you.

Stack(  children: <Widget>[    Transform.translate(      offset: offset,      child: ImageFiltered(        imageFilter: ImageFilter.blur(sigmaY: sigma, sigmaX: sigma),        child: Container(          decoration: BoxDecoration(            border: Border.all(              color: Colors.transparent,              width: 0,            ),          ),          child: Opacity(            opacity: opacity,            child: ColorFiltered(              colorFilter: ColorFilter.mode(color, BlendMode.srcATop),              child: child,            ),          ),        ),      ),    ),    child,  ],)

I've also uploaded a package in Pub.dev: https://pub.dev/packages/simple_shadow