Blur background of image with it's foreground in flutter-CodePudding

I want to be able to replicate this kind of effect in flutter but can't seem to figure out how to do it. I have tried to use the BlurryContainer package but it's not working. So far, I have resorted to using a plain background for the background on which I have placed an image as foreground.

This is what I want to achieve:

CodePudding user response：

You can create this type of UI using a stack with two copies of the image, one as the foreground which isn't blurred and another in the background with an ImageFilter.blur.

Here is an example:

Widget build(BuildContext context) {
  return Stack(
    children: [
      Align(
        alignment: Alignment.center,
        child: SizedBox(
          height: double.infinity,
          width: double.infinity,
          child: ClipRRect(
            child: ImageFiltered(
              imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Image.network(
                'https://images.unsplash.com/photo-1672162724304-866bd48a3d6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.center,
        child: Expanded(
          child: Image.network(
            'https://images.unsplash.com/photo-1672162724304-866bd48a3d6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
            fit: BoxFit.contain,
          ),
        ),
      )
    ],
  );
}

And here is the result using that unsplash image: