How to implement clip toolbar widget in flutter - flutter

Question

I need your help and assistance to how to implement the curved tab as shown in below picture .

Answer 1

This can easily be achieved by custompainter or customclipper. here is an example. I believe you can improve it to better.
Widget for bottom navbar:
Positioned(
bottom: 0,
child: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.amber,
child: Stack(children: [
AnimatedPositioned(
curve: Curves.bounceOut,
duration: const Duration(milliseconds: 300),
top: 10,
left: (MediaQuery.of(context).size.width / 3) * tab,
child: SizedBox(
width: MediaQuery.of(context).size.width / 3,
height: 50,
child: CustomPaint(
size: Size(MediaQuery.of(context).size.width / 3, 50),
painter: TabPainter(),
),
),
),
Positioned(
top: 59,
child: Container(
height: 2,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
Positioned(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 80,
child: Row(
children: [
Expanded(
child: IconButton(
icon: const Icon(Icons.abc),
onPressed: () {
setState(() {
tab = 0;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.add_box),
onPressed: () {
setState(() {
tab = 1;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.air),
onPressed: () {
setState(() {
tab = 2;
});
},
),
)
],
),
),
),
]),
),
)
Painter code:
class TabPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
Path path = Path()
..moveTo(0, size.height)
..quadraticBezierTo(
size.width * 0.2, size.height, size.width * 0.15, size.height * 0.5)
..quadraticBezierTo(size.width * 0.1, 0, size.width * 0.3, 0)
..lineTo(size.width * 0.7, 0)
..quadraticBezierTo(
size.width * 0.9, 0, size.width * 0.85, size.height * 0.5)
..quadraticBezierTo(
size.width * 0.8, size.height, size.width * 1.1, size.height)
..close();
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
tab is just a integer variable
Output