Blur Background on clicking FabCircularMenu

Question

I would like to blur the background behind upon clicking the FabCircularMenu button but I have run out of ideas as to how this can be achieved. Can anyone please suggest what can be done to fix this? The idea that I have thought of is to use a BackDrop filter, but I just can't figure out how this can be achieved.

This is the code I've written for the FabCircularMenu:

class CircularMenu extends StatefulWidget {
  CircularMenuState createState() => CircularMenuState();
}

class CircularMenuState extends State<CircularMenu>
    with SingleTickerProviderStateMixin {
  bool _pressed = false;
  bool isPressed = false;
  final GlobalKey<FabCircularMenuState> fabKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;

    final TextEditingController _controller = new TextEditingController();

    // TODO: implement build
    return Scaffold(
      floatingActionButton: Builder(
        key: fabKey,
        builder: (context) => FabCircularMenu(
          onDisplayChange: (isPressed) {
            
          },
          alignment: Alignment.topLeft,
          ringColor: Colors.transparent,
          ringDiameter: 300.0,
          ringWidth: 100.0,
          fabSize: 50.0,
          fabElevation: 8.0,
          fabColor: Colors.transparent,
          fabOpenIcon: Image.asset('assets/image/logo.png'),
          fabCloseIcon: Image.asset('assets/image/logo.png'),
          fabMargin: const EdgeInsets.all(25.0),
          animationDuration: const Duration(milliseconds: 200),
          animationCurve: Curves.bounceIn,
          children: <Widget>[
            Padding(
              padding:
                  EdgeInsets.only(right: width * 0.03, bottom: height * 0.08),
              child: RawMaterialButton(
                onPressed: () {},
                shape: CircleBorder(),
                child: SvgPicture.asset('assets/svg/user.svg'),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.only(right: width * 0.07, bottom: height * 0.065),
              child: RawMaterialButton(
                onPressed: () {},
                shape: CircleBorder(),
                child: SvgPicture.asset('assets/svg/notification.svg'),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.only(right: width * 0.1, bottom: height * 0.03),
              child: RawMaterialButton(
                onPressed: () {},
                shape: CircleBorder(),
                child: SvgPicture.asset('assets/svg/search.svg'),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.only(right: width * 0.1, bottom: height * 0.001),
              child: RawMaterialButton(
                onPressed: () {},
                shape: CircleBorder(),
                child:
                    SvgPicture.asset('assets/svg/home.svg', color: Colors.blue),
              ),
            )
          ],
        ),
      ),
      body: Container(
        width: double.infinity,
        color: Colors.red,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stack(
              children: [
                Container(
                  height: height * 0.2,
                  width: width * 0.4,
                  // color: Colors.black,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _showSnackBar(BuildContext context, String message) {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text(message),
      duration: const Duration(milliseconds: 1000),
    ));
  }
}

I would like the red background to have a blurred-out effect the moment the icon(FabCircularMenu)

Answer 1

The loader_overlay package is excellent for this kind of thing.