0

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

Amir Hossein Rahmanzadeh
  • 402
  • 1
  • 11
Anas Ezzat
  • 3
  • 3

2 Answers2

0

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

          ),
        ),
Amir Hossein Rahmanzadeh
  • 402
  • 1
  • 11
0

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.
          ),
        ),
      ),
    ),
  ),
...
Shaan Mephobic
  • 1,148
  • 2
  • 7
  • 15
  • thanks for your answer. this is worked fine but the problem that when i tried to add this with other widget the BackdropFilter covered all the screen. is there any way to control the size of the BackdropFilter and keep the blur looks good as it is ? – Anas Ezzat Oct 03 '21 at 22:19
  • @AnasEzzat, just wrap the `BackdropFilter` with `ClipRRect` and give it a borderRadius. Check the updated answer now :) – Shaan Mephobic Oct 04 '21 at 06:03