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

Question

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

Answer 1

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

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

          ),
        ),

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

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

Create a blur shadow to a circular image in flutter

flutter

dart

flutter-layout

flutter-image

image-effects