在颤动中为圆形图像创建模糊阴影答案

【问题标题】：Create a blur shadow to a circular image in flutter在颤动中为圆形图像创建模糊阴影
【发布时间】：2021-11-24 01:44:46
【问题描述】：

我需要帮助来创建 this 模糊效果作为颤动图像上的阴影并使其像那样圆形。

【问题讨论】：

标签： flutter dart flutter-layout flutter-image image-effects

【解决方案1】：

要实现模糊效果，您可以使用BackdropFilter 小部件，创建圆形图像或小部件的一种方法是使用ClipRRect 小部件：

BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: 10.0,
            sigmaY: 10.0,
          ),
          child: ClipRRect(
            child:Image.asset(path),

          ),
        ),

【讨论】：

【解决方案2】：

您必须使用 ImageFilter.blur 进行模糊处理，然后为其添加轻微的颜色以使其模糊处理。

...
  child: Container(
    width:100,height:100,
    decoration:const BoxDecoration(
       image: DecorationImage(
          image: AssetImage(
              '...'),  // insert image path here
          fit: BoxFit.cover,
        ),
       shape:BoxShape.circle),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(100/2), //divide width of Container by 2 to make it rounded
      child: BackdropFilter(
        filter:ImageFilter.blur(
          sigmaX: 30, // mess with this to update blur
          sigmaY: 30
        ),
        child:Container(
          decoration:const BoxDecoration(
            shape:BoxShape.circle,
            color:Colors.black26  //change this color according to need.
          ),
        ),
      ),
    ),
  ),
...

【讨论】：

感谢您的回答。这很好用，但是当我尝试将它与其他小部件一起添加时，BackdropFilter 覆盖了所有屏幕。有什么方法可以控制 BackdropFilter 的大小并保持模糊看起来不错？
@AnasEzzat，只需用ClipRRect 包裹BackdropFilter 并给它一个borderRadius。现在检查更新的答案:)