how can i use BackdropFilter in custompainter

hamid zare 0
Viewed 13

I want to make something similar to the picture sample pic

So I wrote the following codes

Positioned(
                  top: 200,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    height: 60,
                    width: 339,
                    clipBehavior: Clip.none,
                    decoration: BoxDecoration(),
                    child: CustomPaint(
                      painter: BottomNavBar(),
                      child: Container(
                        clipBehavior: Clip.hardEdge,
                        decoration: BoxDecoration(
                            color: Colors.black12.withOpacity(0)),
                        child: BackdropFilter(
                          filter:
                              ui.ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                          child: CustomPaint(painter: BottomNavBar()),
                        ),
                      ),
                    ),
                  ))

But the output is as follows output pic

The borders around the circle also disappear How can I solve it? should i pass image to custompainter and use BackdropFilter ? how ? tnx for ur help

flutter
1 Answers

BackdropFilter applies the Filter to everything behind the child Widget. ImageFiltered applies the Filter to the child.

If that is not the cause of the problem you might need to wrap the blurred widget in a ClipPath to cut off the extra parts.

MindStudio0
Related