How do i blur the bottom navigation bar in flutter?

Question

for hours I've been trying to blur my bottom navigation bar using the BackdropFilter and ImageFilter.blur but to no avail.

in my code, the bottom navigation bar is wrapped in a cliprrect widget and they're both wrapped in a container. I've tried to wrap the container, cliprrect and bottomnavigationbar in the backdropfilter widget but none of them worked. I wrapped the cliprrect in a stack widget and then wrapped the bottomnavigationbar in the backdropfilter widget but it still doesnt work. i've been at this for hours no please help. this is the code:

bottomNavigationBar: Container(
        height: 50,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(10),
            topLeft: Radius.circular(10),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              spreadRadius: 2,
              blurRadius: 5,
              offset: Offset(0, 3),
            ),
          ],
        ),
        child: Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5),
                topRight: Radius.circular(5),
              ),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: BottomNavigationBar(
                  showSelectedLabels: false,
                  showUnselectedLabels: false,
                  type: BottomNavigationBarType.fixed,
                  selectedItemColor: Colors.lightBlue,
                  unselectedItemColor: Colors.grey[200],
                  currentIndex: _currentIndex,
                  onTap: navigationTapped,
                  items: const [
                    BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),

the result for the code above

what i'm trying to do

the result your code gave me! 1

Answer 1

There are multiple solutions. Either you can play with a blendMode in your BackDropFilter as it currently is, either you can put a Container above the BottomNavigationBar that you make blurry:

bottomNavigationBar: Container(
    height: 50,
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.only(
        topRight: Radius.circular(10),
        topLeft: Radius.circular(10),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 2,
          blurRadius: 5,
          offset: Offset(0, 3),
        ),
      ],
    ),
    clipBehavior: Clip.antiAlias,
    child: Stack(
      children: [
        BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.lightBlue,
          unselectedItemColor: Colors.grey[200],
          currentIndex: _currentIndex,
          onTap: navigationTapped,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
          ],
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(color: Colors.grey.withOpacity(0.1)),
        ),
      ],
    ),
  ),

Note that I also removed the ClipRRect that seemed useless, and put a clipBehavior in the main Container instead.

EDIT (asked to put the blurry effect under the buttons)

  bottomNavigationBar: Container(
    height: 120,
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
    ),
    clipBehavior: Clip.antiAlias,
    child: Stack(
      children: [
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(color: Colors.grey.withOpacity(0.3)),
        ),
        Align(
          alignment: AlignmentDirectional.center,
          child: BottomNavigationBar(
            showSelectedLabels: false,
            showUnselectedLabels: false,
            type: BottomNavigationBarType.fixed,
            selectedItemColor: Colors.lightBlue,
            unselectedItemColor: Colors.grey[200],
            backgroundColor: Colors.white.withOpacity(0),
            currentIndex: _currentIndex,
            onTap: navigationTapped,
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
            ],
          ),
        ),
      ],
    ),
  ),