Search code examples
user-interfaceflutterdartuser-experience

How do I add a shadow behind the tab bar in flutter?


I want to add a subtle shadow behind this tab bar which is wrapped in a container. I tried to add it but its not showing up evidently. enter image description here I had to edit it in this way because I had to crop the edges of the bar to male it rounded.

Widget _bottomNavigationBar(int selectedIndex) => ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(52.0), topRight: Radius.circular(52.0)),
    child: Container(
        height: 90,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(82.0),
              topRight: Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              offset: Offset(-5, 5),
              blurRadius: 10,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 28,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );

I want my tab bar to look something like this enter image description here


Solution

  • here the CLipRRect Widget is cutting your widget in rect with radius. your box shadow is being cuttoff because of clip r rect

    remove clipping widget and then try