Solving IOS bottom notch problem in flutter

IOS X모델 이후로, 아이폰에서 bottom notch가 생겨버렸다. 아래쪽은 버튼은 없어지고 notch가 생겼고 위쪽은 M자로 생긴 모델이다. 

이러한 모델에서는 OS단 자체에 top and bottom padding이 들어간다. 

그래서 앱 UI Design을 설계할 때 bottom notch가 있는 것들과 없는 것들을 구분 시켜줘야 하는데 플러터 자체에서는 그 기능이 없다. 

그래서 자체적으로 코드를 추가해줘야 한다. 

 

아래와 같이 bool 코드를 짜준 다음에, 

bool isNeedSafeArea = MediaQuery.of(context).viewPadding.bottom > 0;

디자인과 패딩을 적용시킬 부분에 삼항연산자를 이용하여서 구분시켜 주면 된다. 

그리고 또한 SafeArea를 지정해줘야지 notch 부분을 살릴 수가 있다. 

 

 

참고링크: https://stackoverflow.com/questions/58848681/how-do-i-check-if-device-needs-safearea-needs-bottom-top-padding

How do I check if device needs SafeArea? (needs bottom/top padding)

 

 

참고링크: https://velog.io/@adbr/flutter-Check-if-current-device-has-notch-check-top-and-bottom-padding

[flutter] Check if current device has notch (check top and bottom padding)

참고링크: https://medium.com/macoclock/solving-iphone-bottom-notch-problem-in-flutter-5785a0fc22e4

Solving iPhone bottom notch problem in Flutter