Flutter BottomNavBar not showing BoxShadow - flutter

Question

I made a custom BottomNav Bar and wrapped it inside of a container so that I could give it some box shadow. But the box shadow does not apply. Here is the code
class CBottomNavBar extends StatefulWidget {
#override
_CBottomNavBarState createState() => _CBottomNavBarState();
}
class _CBottomNavBarState extends State<CBottomNavBar> {
#override
Widget build(BuildContext context) {
return Consumer<SManageIndex>(
builder: (context, manageIndex, child) => Container(
height: 80,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: primaryColorDark,
boxShadow: [
BoxShadow(color: primaryColorDark, blurRadius: 4, spreadRadius: 2)
],
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20))),
child: BottomNavigationBar(
backgroundColor: primaryColorDark,
items: [
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.hospital,
),
title: Text('Appointments')),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.pills,
),
title: Text('Medicines'),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.bookMedical,
),
title: Text('Documents'),
),
],
currentIndex: manageIndex.index,
onTap: (value) => manageIndex.changePage(value),
),
),
);
}
}
The thing is I want both the border radius and box shadow, so I am using a container. Any other straightforward ways of doing the same are also welcome.
Thank you for your time.

Answer 1

Your answer is Offset. Use Offset class in your decoration for boxShadow element, and you will be good do go
//dx is horiztonal and dy is vertical
// play with it
boxShadow: [BoxShadow(offset: Offset(dx, dy));

Answer 2

You need the Offset property of the BoxShadow,
The offset property is used to control the position of the shadow. It is zero by default so you'll need to add the Offset:
I added a demo using your widget tree as an example:
class CBottomNavBar extends StatefulWidget {
#override
_CBottomNavBarState createState() => _CBottomNavBarState();
}
class _CBottomNavBarState extends State<CBottomNavBar> {
#override
Widget build(BuildContext context) {
return Consumer<SManageIndex>(
builder: (context, manageIndex, child) => Container(
height: 80,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: primaryColorDark,
boxShadow: [
BoxShadow(
color: primaryColorDark, blurRadius: 4, spreadRadius: 2,
// add the offset property
offset: Offset(0, 5), // new line [move to the right[horizontally] by 0 ,move to the top[vertically] by 5]
),
],
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20))),
child: BottomNavigationBar(
backgroundColor: primaryColorDark,
items: [
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.hospital,
),
title: Text('Appointments')),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.pills,
),
title: Text('Medicines'),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesomeIcons.bookMedical,
),
title: Text('Documents'),
),
],
currentIndex: manageIndex.index,
onTap: (value) => manageIndex.changePage(value),
),
),
);
}
}