Notched Bottom Navigation Bar with padding

Question

I am trying to use bottomNavigationBar with notched effect in flutter, and of course it is fine. But when I try to add padding to BottomAppBar on the left and right to make the navigator floating-like, the notch position shifts to the right!! This means the floating action button is in its correct spot but the notch is not exactly under it but shifted to the right. It shifts to the right exactly as the amount of padding I give to the BottomAppBar! Why! The shape feature I used for BottomAppBar is this:

AutomaticNotchedShape(RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(35))), StadiumBorder()),

Just to be clear, I want something like this but with the notched effect on the middle (FloatingActionButtonLocation.centerDocked).

Like this but with notch in the center

Edit

Sample code to demonstrate this issue:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(
          20.0,
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(30.0),
          child: BottomAppBar(
            notchMargin: 5.0,
            shape: const CircularNotchedRectangle(),
            child: Container(height: 50.0),
            color: Colors.blue,
            clipBehavior: Clip.hardEdge,
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

Render for sample code:

Answer 1

use this widget https://pub.dev/packages/dot_navigation_bar

example source code https://github.com/haptome/watchs.git