flutter – Bottom navigation bar is floating on iOS


My bottom navigation is malformed when I run my Flutter app on iOS. It seems to be floating:

enter image description here

My scaffold looks like this:

Scaffold(
  appBar: getAppbar(),
  drawer: getMainDrawer(context),
  floatingActionButton: ...,
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  body: SafeArea(
    top: false,
    bottom: false,
    child: _widgetOptions.elementAt(_selectedIndex),
  ),
  extendBody: true,
  bottomNavigationBar: buildBottomNavigationBar())

My bottom navigation looks like this:

Widget buildBottomNavigationBar() {
  return BottomAppBar(
    key: const Key('bottomAppBar'),
    shape: const CircularNotchedRectangle(),
    elevation: 4,
    notchMargin: 8,
    clipBehavior: Clip.antiAlias,
    child: BottomNavigationBar(
      showUnselectedLabels: false,
      showSelectedLabels: false,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: FaIcon(FontAwesomeIcons.dumbbell),
          label: 'Sets',
        ),
        BottomNavigationBarItem(
          icon: FaIcon(FontAwesomeIcons.calendar),
          label: 'Timeline',
        ),
      ],
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
    ),
  );
}

Note that the bottom navigation looks fine on Android. Does anyone know what causes this on iOS?

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img