how to make blur in flutter - flutter

Question

I want to make When I click the sign-up button on the login page, blur is applied to the entire page and I want to show a pop-up window.
When clicking, I changed the filter value by specifying the sigmaX, Y values of the background filter as variables.
However, this uses the stack to place the backgrounddropfilter in front of the entire screen scaffold widget.When this happens, the button cannot be clicked because it goes behind the background filter.
how can I solve it?
Scaffold widgets with blur applied and scaffold widgets without blur
Isn't there a way to make each one and then print it out when the button is pressed?
Widget build(BuildContext context) {
return Stack(children: [
Scaffold(
appBar: AppBar(
...
),
body:ButtonTheme(
minWidth: 100.0,
height: 50.0,
child: ElevatedButton(
)
)
makeblur(a: )
)
);
}
class makeblur extends StatelessWidget {
makeblur({required this.a});
double a;
#override
Widget build(BuildContext context) {
return Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: a, sigmaY: a),
child: Container(
color: Colors.transparent,
),
));
}
}

Answer 1

The child component of backdrop filter is the part that will not be blurred. So you may have to place the button as the child of the backdrop filter
BackdropFilter(
filter: ImageFilter.blur(sigmaX: a, sigmaY: a),
child: Button(),//<-- button that you wish not to blur here.
)

Answer 2

You can use this widget to have the effect, wrap your widget GlassMorphism
class GlassMorphism extends StatelessWidget {
GlassMorphism({
Key? key,
required this.blur,
required this.opacity,
required this.child,
BorderRadius? borderRadius,
}) : _borderRadius = borderRadius ?? BorderRadius.circular(12),
super(key: key);
final double blur;
final double opacity;
final Widget child;
final BorderRadius _borderRadius;
#override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: _borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: blur,
sigmaY: blur,
),
child: Container(
decoration: BoxDecoration(
color: ColorPallet.glassMorphism.withOpacity(opacity),
borderRadius: _borderRadius,
border: Border.all(
color: ColorPallet.glassMorphism.withOpacity(.2),
),
),
child: child,
),
),
);
}
}