How to implement clip toolbar widget in 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