extendBody with custom BottomNavBar and FAB not working properly

Issue

I've searched around for similar problems like this but couldn't find any. I made a custom bottom navigation bar with a docked FAB. As far as i understand, to make the notch for the FAB transparent I need to add extendBody = true; to the Scaffold, which i did. The result is that out of the four navbar icons, only one of them are showing the transparent notch. Code and images below. Images are showing second and third navbar icon.

     Scaffold(
          drawerEnableOpenDragGesture: true,
          extendBody: true,
          appBar: AppBar(
            title: Text('Some text'),
          drawer: AppDrawer(),
          bottomNavigationBar: BottomAppBar(
            color: Colors.blue,
            shape: CircularNotchedRectangle(),
            notchMargin: 2.0,
            child: Container(
              height: MediaQuery.of(context).size.width * 0.15,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    flex: 4,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        IconButton(icon: Icon(Icons.account_box), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 0;
                            });
                          },
                        ),
                        IconButton(icon: Icon(Icons.account_box), // extendBody working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 1;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                  Expanded(flex: 2, child: SizedBox()),
                  Expanded(
                    flex: 4,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        IconButton(icon: Icon(Icons.email), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 2;
                            });
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.email), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 3;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          body: _pages[_selectedPageIndex]['page'],
          floatingActionButton: FloatingActionButton(
            mini: true,
            onPressed: () {
              if (_selectedPageIndex == 0)
                Navigator.of(context).pushReplacementNamed(
                    Screen1.routeName);
              if (_selectedPageIndex == 1)
                Navigator.of(context).pushReplacementNamed(
                    Screen2.routeName);
              if (_selectedPageIndex == 2)
                Navigator.of(context).pushReplacementNamed(
                    Screen3.routeName);
              if (_selectedPageIndex == 3)
                Navigator.of(context).pushReplacementNamed(
                    Screen4.routeName);
            },
            child: _pages[_selectedPageIndex]['icon'],
            backgroundColor: Theme.of(context).accentColor,
          ),
        )

What am I missing? Thank you!

Solution

I solved it. extendBody: true, is correct, however the child cannot be wrapped in safearea.

Answered By - krumpli