Create a blur shadow to a circular image in flutter

Question

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

Answer 1

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

Answer 2

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

          ),
        ),