CODEWITHSUNDEEP
dartflutter
Bnd10706
Bnd10706

Reputation: 2373

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

Upvotes: 6

Views: 11182

Answers (5)

Javi Marzán
Javi Marzán

Reputation: 1340

The trick here is using SafeArea BUT not in the way you might think. If you check the SafeArea docs, you can see the following passage:

...but you don't always need to put it this high in the Widget tree. For example, if you purposefully want your app to stretch under the cutouts, you can move the SafeArea to wrap whatever content makes sense, and let the rest of the app take up the full screen.

So the trick here is not using SafeArea at the top of your tree, but inside your view, as child of the widget where you set the background color. You can even use more than one SafeArea in a view, if you need so: one for some widget at the top and another for a bottom widget, using top and bottom properties to configure them.

So, for example:

class MyWidget ... {
    Widget build(context) {
        return Container(
            color: myBackgroundColor,
            child: SafeArea(
                child: MyContent(),
            )
         );
    }
}

Upvotes: 0

awaik
awaik

Reputation: 12325

From my experience, SafeArea takes away layout flexibility. I prefer to use different height bottom menu:

  1. without a notch
  2. with notch +20pixels

You can easily do it with package https://pub.dev/packages/iphone_has_notch It is light and doesn't take any additional resources.

So, code could be as simple as:

height: IphoneHasNotch.hasNotch ? 88 : 68,

Upvotes: 4

Ameer
Ameer

Reputation: 725

I hope this will give you the expected result. You can use this code to avoid card-like feel.

EDITED : 

Align(child: SafeArea(
            bottom: true,
            child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
          ),
        ),

Or 

 SafeArea(
            bottom: true,
            child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
          ),

Upvotes: -1

Shine Wanna
Shine Wanna

Reputation: 21

return Container(
  color:Colors.white,
  child:SafeArea(
  bottom: true,
  child: bmnav.BottomNav(),
 ),
)

Upvotes: 2

Leoog
Leoog

Reputation: 244

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

Upvotes: 5

Related Questions