如何在Flutter中的图像上实现DropShadow / Shadow效果?

问题描述 投票:0回答:1

我试图使用BackDropFilter像堆栈中的两个图像(其中一个图像显然填充有黑色)那样进行操作。但是结果模糊了堆栈的所有内容(即使在图像的Alpha区域)。我已经搜索了这种效果,但尚未找到答案。如果您能给我实现此效果的可能解决方案或方法,我将不胜感激。

                  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
flutter dart flutter-layout
1个回答
0
投票

尝试一下

   .add-shadow {position: relative; }  

   .add-shadow::after {content: '';width: 240px;height: 50px;position: absolute;

    box-shadow: 0 -180px 117px rgba(0,0,0,0.7); 

    transform-origin: 100%; 

    transform: rotateX(78deg) translateY(413px);  

    transition: box-shadow 350ms;    

    z-index: 5000;     

    left: -27px;  

    } 
© www.soinside.com 2019 - 2024. All rights reserved.