0

I want to know how AppBar in flutter covers the notch area. Looking at the source code the App bar uses NavigationToolbar at its core. But I did not understand how it covers the entire notch area incase there is a notch.

The context behind asking this is I am using NavigationToolbar to achieve a design as shown in the screenshot below. For Android, it is working good but for IOS as in the screenshot, there is a gap at the top next to the notch. Even with 

SafeArea(top:false)

I am not able to cover the area next to the notch. Any suggestions would be helpful.

Notch around area

Dharmesh Mansata
  • 4,422
  • 1
  • 27
  • 33
Shashi Kiran
  • 999
  • 5
  • 13
  • 27

1 Answers1

1

This is because NavigationToolbar in iOS uses the CupertinoNavigationBar that is compliant with the safearea.

Anyway Apple guidelines forbids the use of interactive controls in the safearea like in your image.

This because iOS users uses the right top corner to open the control center and the rest of the top area to open the notifications.

Kerberos
  • 4,036
  • 3
  • 36
  • 55