Flutter add shadow in Custom painter - flutter

Question

I am following some tutorial and fine a very good navbar but issue is when i replace it in my app i need to add shadow.
Here is the code
class BottomNavBarV2 extends StatefulWidget {
#override
_BottomNavBarV2State createState() => _BottomNavBarV2State();
}
class _BottomNavBarV2State extends State<BottomNavBarV2> {
int currentIndex = 0;
setBottomBarIndex(index) {
setState(() {
currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white.withAlpha(55),
body: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: size.width,
height: 80,
child: Stack(
overflow: Overflow.visible,
children: [
CustomPaint(
size: Size(size.width, 80),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.6,
child: FloatingActionButton(backgroundColor: Colors.orange, child: Icon(Icons.shopping_basket), elevation: 0.1, onPressed: () {}),
),
Container(
width: size.width,
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(
Icons.home,
color: currentIndex == 0 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
IconButton(
icon: Icon(
Icons.restaurant_menu,
color: currentIndex == 1 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(1);
}),
Container(
width: size.width * 0.20,
),
IconButton(
icon: Icon(
Icons.bookmark,
color: currentIndex == 2 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(2);
}),
IconButton(
icon: Icon(
Icons.notifications,
color: currentIndex == 3 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(3);
}),
],
),
)
],
),
),
)
],
),
);
}
}
class BNBCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
Path path = Path();
path.moveTo(0, 20); // Start
path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
path.arcToPoint(Offset(size.width * 0.60, 20), radius: Radius.circular(20.0), clockwise: false);
path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 20);
canvas.drawShadow(path, Colors.black, 5, true);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Screen shot
[
I need to add shadow in this curved navbar. Because body and navbar both is white and navbar curved is not much visible. Need to add little shadow so can see curves easily

Answer 1

You can use the below code to gain the custom shadow for your widget. Just wrap your widget with the below container.
return Container(
margin: EdgeInsets.only(left: 20, top: 50, right: 20, bottom: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.4),
spreadRadius: 8,
blurRadius: 10,
offset: Offset(0, 5), // changes position of shadow
),
],
),
)