how can i make such translucent bottomNavigationBar(or container) on flutter?

Question

like this

I tried to use BackdropFilter but it applies to everything to the background.

Answer 1

Try by using opacity in the container. Amd for that black circular button use floatingbutton.

Answer 2

Try this example by using ClipRRect, BackdropFilter & withOpacity()

bottomNavigationBar: ClipRRect(
          clipBehavior: Clip.antiAlias,
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: BottomNavigationBar(
              onTap: (int index) => _onItemTapped(index),
              selectedFontSize: 0.0,
              unselectedFontSize: 0.0,
              backgroundColor: burnt.withOpacity(.5),
              currentIndex: _selectedPage,
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: const Icon(Icons.more_horiz_outlined),
                  label: 'More',
                ),
                const BottomNavigationBarItem(
                  icon: Icon(Icons.home_outlined),
                  label: 'Home',
                ),
                const BottomNavigationBarItem(
                  icon: Icon(Icons.receipt_long_outlined),
                  label: 'Orders',
                ),
              ],
            ),
          ),
        ),