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

Question

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

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