Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How implement DropShadow / Shadow effect at Images in Flutter?

I tried to do something like a two Images in a Stack (one of them filled with black color obviously) with a BackDropFilter. But the result blurs everything bellow of the Stack (even on alpha area of the image). I`d searched about this effect but dont have found the answers yet. i'll appreciate if you can give me a possible solution or path to implement this effect.

                  children: <Widget>[
                    ClipRect(
                        child: BackdropFilter(                      
                        child:Image.asset('assets/leopard.png', color: Colors.black,),
                        filter: prefix0.ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                      ),
                    ),
                    Image.asset('assets/leopard.png',),
                    ] ,```


  [1]: https://i.stack.imgur.com/iLKYo.jpg
like image 521
Matheus Bronca Avatar asked Nov 06 '22 11:11

Matheus Bronca


1 Answers

You can use simple_shadow. Here's the example from the project:

SimpleShadow(
    child: Image.asset('images/bird.png'),
    opacity: 0.6,         // Default: 0.5
    color: Colors.blue,   // Default: Black
    offset: Offset(5, 5), // Default: Offset(2, 2)
    sigma: 7,             // Default: 2
)

I've verified this works even with flutter_svg.

like image 158
user2233706 Avatar answered Nov 15 '22 07:11

user2233706