how to make blur in flutter-CodePudding

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

CodePudding user response：

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. 
    )

CodePudding user response：

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