I am new to flutter. I want to make a .png image blurry in flutter which is in a container. For that I used the below mentioned code. But the blur effect is applied to the whole screen.

I used the following code :

child: Container(
                  padding: EdgeInsets.only(
                  left: 18, right: 18, top: 7, bottom: 7),
                  width: _width,

                  child: Stack(
                    children : [ 
                      Image.asset('assets/classes.png',
                            fit: BoxFit.fitWidth,
                            ),
                      Positioned.fill(
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 4,sigmaY: 4),
                          child: Container(color: Colors.white.withOpacity(0.5)),
                          )
                        )
                    ]
                    ),

                ),
              ),
            ]),
          ),
        ),
      ),
    ]),

CodePudding user response：

Check this package in pub.dev

https://pub.dev/packages/blur

Also, you could find a good solution in the answers to this question:

Blurred Decoration Image in Flutter

CodePudding user response：

I believe the image should be the child of the backdrop filter