I want to have a bottom naviagation bar in my app with a transparent blurred background similar to the one in the picture below
enter image description here

I figured out this effect in general could be done by wrapping the container/widget with Backdropfilter and tweaking the opacity. However when I tried to wrap the NavigationBar widget it did not pass on the effect to the child/Navigation Bar. But when I do it using bottomAppbar widget, I am able to execute this effect. Although it could be done using bottomAppbar, it involves individually configuring things so If there is a way to integrate this with BottomNavigationBar it would be really helpful.

Bottom Navigation Bar

class _NavBarSetUpState extends State<NavBarSetUp> {
  int currentPageIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
          child: Container(
            //color: Colors.blueGrey.shade500.withOpacity(0.7),
            child: NavigationBar(
              backgroundColor: Colors.blueGrey.shade500.withOpacity(0.7),
              labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
              selectedIndex: currentPageIndex,
              destinations: const <Widget>[
                NavigationDestination(
                  icon: Icon(Icons.dataset),
                  label: 'Cards',
                ),
                NavigationDestination(
                  icon: Icon(Icons.wallet),
                  label: 'Home',
                ),
                NavigationDestination(
                  icon: Icon(Icons.settings),
                  label: 'Setting',
                ),
              ],
              onDestinationSelected: (int index) {
                setState(() {
                  currentPageIndex = index;
                });
              },
            ),
          ),
        ),
      ),
      appBar: AppBar(
        title: [
          const Text('Page 1'),
          const Text('Page 2'),
          const Text('Page 3')
        ][currentPageIndex],
      ),
    );
  }
}