How do I get rid of extra BottomAppBar in Flutter?

Question

I have extra footer BottomAppBar that I don't want to be there. I want the Bottom Navigation Bar to be nested within the Bottom App Bar because I still want to keep the notch for the Floating Action Button. The screenshot shows it clearly, as it is colored Red.

This is my code:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent.withOpacity(0.4),
        ),
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
      ),
      bottomNavigationBar: bottomNavBar,
      floatingActionButton: addPostButton,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget get bottomNavBar {
    return BottomAppBar(
      color: Colors.red,
      shape: CircularNotchedRectangle(),
      elevation: 0,
      notchMargin: 10,
      child: BottomNavigationBar(
        elevation: 0,
        items: [
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.homeOutline),
            activeIcon: Icon(MdiIcons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.accountOutline),
            activeIcon: Icon(MdiIcons.account),
            title: Text("Profile"),
          ),
        ],
      ),
    );
  }

  Widget get addPostButton {
    return FloatingActionButton(
      focusElevation: 0,
      onPressed: () {},
      child: Icon(
        MdiIcons.mapMarkerPlusOutline,
        size: 30,
      ),
    );
  }
}

Answer 1

Change your code as per below then check:

 Widget get bottomNavBar {
  return BottomNavigationBar(
    elevation: 0,
    items: [
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.homeOutline),
        activeIcon: Icon(MdiIcons.home),
        title: Text("Home"),
      ),
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.accountOutline),
        activeIcon: Icon(MdiIcons.account),
        title: Text("Profile"),
      ),
    ],
   );
  }