How to create a Notched Shape in flutter

user_10664446 0
Viewed 685

enter image description here

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

any suggestions will be appreciated!!

flutter-layout flutter
2 Answers

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.

user_152753050

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>[
        ...
      ],
    ),
  ),
);
user_10030590
Related