Full blurring of the container instead of a circle

Question

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%C3%BCtte_-_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

Update:

My friends, I solved this problem:

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


class CoustomCircle extends CustomClipper<Rect> {

  @override
  Rect getClip(size){
    return const Rect.fromLTWH(0, 0, 200, 200);
  }

@override
  bool shouldReclip(oldClipper){
  return true;
}
}

can you include the image that you want? – eamirho3ein Nov 30 '22 at 18:58 — eamirho3ein, Nov 30 '22 at 18:58

score 0 · Answer 1 · answered Nov 30 '22 at 16:27

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%C3%BCtte_-_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'

score 0 · Answer 2 · answered Nov 30 '22 at 18:56

0

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

answered Nov 30 '22 at 18:56

Delwinn

891
4
19

Thanks, I tested it, but my problem is still not solved – Mahdi Nov 30 '22 at 21:15

score 0 · Accepted Answer · answered Dec 01 '22 at 08:16

My friends, I solved this problem:

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


class CoustomCircle extends CustomClipper<Rect> {

  @override
  Rect getClip(size){
    return const Rect.fromLTWH(0, 0, 200, 200);
  }

@override
  bool shouldReclip(oldClipper){
  return true;
}
}

Full blurring of the container instead of a circle

3 Answers3