How to create a bottom navigation bar with Custom Painter in Flutter?

Question

How can I create a bottom navigation bar with a CustomPainter like this?

Especially the FloatingActionButton notch / edges.

Update: I did it using custom FloatingActionButtonLocation

class CustomFABLocation extends FloatingActionButtonLocation {
  const CustomFABLocation({
    required this.bottomBarHeight,
  });

  final double bottomBarHeight;

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final xPos = scaffoldGeometry.scaffoldSize.width * .4;
    final yPos = scaffoldGeometry.scaffoldSize.height - bottomBarHeight - 13.0;

    return Offset(xPos, yPos);
  }
}

Here is the result:

Answer 1

You may like the style-15 of this package. Just apply padding to center button.

https://pub.dev/packages/persistent_bottom_nav_bar