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.
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('')),
],
),
)),
);
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