Create a blur shadow to a circular image in flutter-CodePudding

I want a help to create thisenter image description here blur effect as a shadow on an image in flutter and make it circular like this.

CodePudding user response：

To implement blur effect you can use BackdropFilter widget, to create a round image or widget one approach is to use ClipRRect widget:

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

          ),
        ),

CodePudding user response：

You have to put a blur with ImageFilter.blur and then give it a slight color for it to blur with.

...
  child: Container(
    width:100,height:100,
    decoration:const BoxDecoration(
       image: DecorationImage(
          image: AssetImage(
              '...'),  // insert image path here
          fit: BoxFit.cover,
        ),
       shape:BoxShape.circle),
    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.
        ),
      ),
    ),
  ),
...