How to create a Notched Shape in flutter

Question

Trying to figure out how to build something similar to the images but with not result. I tried to use CircularNotchedRectangle code and put it inside a CustomPainter but couldn't figure out how to adapt it to my case.

any suggestions will be appreciated!!

Answer 1

You can use Flutter Shape Maker online tool. With the help of this you can create your custom shape and it will give you a code for that shape.

Answer 2

You can have it on the bottomNavitationBar property of the Scaffold and use the BottomAppBar widget with a notchMargin and a shape to put your CircularNotchedRectangle :

Scaffold(
  ...
  bottomNavigationBar: BottomAppBar(
    notchMargin: 6.0,
    shape: CircularNotchedRectangle(),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        ...
      ],
    ),
  ),
);