skip to Main Content

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.
This Image

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;
}
}

3

Answers


  1. Chosen as BEST ANSWER

    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;
    }
    }
    

  2. 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’

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search