dartflutter

How to set Flutter iPhone X Safe Area


The reason I used Flutter for this project was to get both Android and iphone in 1 code base. The Android app looks good with the bottom nav bar hitting the on screen home.

The iphone version however runs into the slide up bar on the iphone X models.

Is there a way to solve this? I would take being able to adjust it, but I dont want a drop shadow, I just want it one solid color.

I used a SafeArea, and while it did fix it. it also caused the bar to move up and look weird.

bottomNavigationBar: SafeArea(
     child: bmnav.BottomNav(
      elevation: 9.0,
      index: _currentTab,
      iconStyle: bmnav.IconStyle(
          color: Colors.grey, onSelectColor: Colors.lightGreen),
      labelStyle: bmnav.LabelStyle(
          onSelectTextStyle: TextStyle(color: Colors.lightGreen)),
      onTap: (int index) {
        setState(() {
          _currentTab = index;
        });
      },
      items: [
        bmnav.BottomNavItem(Customicons.main, label: "Home"),
        bmnav.BottomNavItem(Customicons.bible, label: "Bible"),
        bmnav.BottomNavItem(Customicons.sermons, label: "Sermons"),
        bmnav.BottomNavItem(FontAwesomeIcons.pray, label: "Prayer"),
        bmnav.BottomNavItem(Icons.more_horiz, label: "More"),
      ]),
),

This is what it looks like with and without the safe area. But what I am looking for is a sold look, basically like a large bottom nav bar.

enter image description hereenter image description here


Solution

  • return SafeArea(
      bottom: true,
      child: bmnav.BottomNav(),
    )