I am encountering an abnormal behaviour of FloatingActionButton and BottomAppBar enter image description here,
Problems i am facing are that the notch is not in the center and the also the row’s childern are not in the center

Here is the code,

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      backgroundColor: gray70,
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: BottomAppBar(
            height: 60,
            color: gray60,
            surfaceTintColor: Colors.transparent,
            shape: const CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.home),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.square_grid_2x2),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.calendar),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.creditcard),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I want to achieve the similar Effect enter image description here