Full blurring of the container instead of a circle-CodePudding

I want to have only one blurred circle but this is not possible and the outer parts of the circle i.e. Container are completely blurred. The same is true for CustomPoint.

Codes :

Center(
    child: Stack(alignment: Alignment.center, children: [
      Image.network(
          "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domhütte_-_2.jpg"),
      ClipRRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            width: 200,
            height: 100,
            decoration: const BoxDecoration(
                color: Color.fromARGB(33, 255, 0, 0),
                shape: BoxShape.circle),
          ),
        ),
      )
    ]),
  ),

I searched the internet and did not find anything

CodePudding user response：

Use the ImageFiltered widget instead of BackdropFilter

   Center(
        child: Stack(alignment: Alignment.center, children: [
          Image.network(
              "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domhütte_-_2.jpg"),
          ClipRRect(
            child: ImageFiltered(
              imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                width: 200,
                height: 100,
                decoration: const BoxDecoration(
                    color: Color.fromARGB(33, 255, 0, 0),
                    shape: BoxShape.circle),
              ),
            ),
          )
        ]),
      ),

Remember to import 'dart:ui'

CodePudding user response：

Rather than blurring out a container, you could blur out a CircleAvatar. Refer this too Create a blur shadow to a circular image in flutter