플러터 (Flutter) 앱 화면 크기 MediaQuery

 이번에 회사 프로젝트로 Flutter를 진행 중에 iOS와 Android 화면이 달라서 생기는 Ui를 해결하기 위해서 MediaQuery에 대하여 알아보자.

MediaQuery란,

---

  MediaQuery는 기기의 화면 너비나 높이를 가져오거나, 화면의 방향 정보를 얻을 때 주로 사용된다. 이를 사용하면 앱이 실행되는 디바이스의 크기에 따라 레이아웃을 조정할 수 있다.

 

사용하게 된 이유

---

 이번에 bottomNavigationBar를 작업 중에 안드로이드와 iOS의 차이를 발견하게 되었고 iOS는 iPhone X와 같은 최신 모델에서는 스크린 하단에 Home Indicator가 생기면서 뷰가 스크린에 겹치는 현상이 생긴다.

그림 1) 안드로이드 하단 바	그림 2) iOS 하단 바

 

 위의 그림과 같이 하단바에서 iOS는 뷰와 겹치는 것을 알 수 있다. 보통 이러한 문제를 해결하기 위해서 SafeArea라는 함수로 감싸는 방법이 존재한다! 코드는 아주 간단히 bottomNavigationBar에 SafeArea를 감싸면 된다!

bottomNavigationBar : Container(
	child : Container ...

 

 위의 방식의 코드에서

bottomNavigationBar : SafeArea(
	child : Container(
		child : Container ...

으로 감싸면 된다 아주 쉽다.

 

그림 3) 안드로이드 하단 바	그림 4) iOS 하단 바

 

 위의 코드를 보면 확실히 Home Indicator와 겹치지 않고 올라간 모습이 보인다. 하지만 여기서 문제점이 생긴다! 뒤에 저렇게 하얀색 배경이고 아무 콘텐츠가 없으면 문제가 없지만 설계를 잘못하면 밑에 그림 5와 같은 오류가 발생할 수 있다.

 

그림5 ) IOS 하단 바

 

 그래서 저는 MediaQuery의 기능을 활용하여 bottomNavigationBar에 패딩을 iOS bottom의 padding 만큼 padding을 넣는 식으로 작업을 하였다.

 

그림 6) 안드로이드 하단 바	그림 7) iOS 하단 바

 

코드

bottomNavigationBar : Container(
	// MediaQuery로 iOS의 padding.bottom 값을 가져온다
    // 안드로이드는 MediaQuery를 사용해서 0이라는 값이 나온다
	padding : EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom) 
	child : Container ...

이렇게 문제를 해결하였다. 

 

마치며

---

 SafeArea와 MediaQuery에 대하여 좀 더 자세히 알 수 있던 시간이었다. 앞으로는 상황에 맞게 SafeArea와 MediaQuery를 이용해서 iOS와 Android 각각의 화면에 적절한 Ui를 보여줄 수 있도록 노력해야겠다. MediaQuery에는 padding뿐만 아니라 화면에 대한 정보는 대부분 받아 올 수 있으니 더 다양하게 사용할 수 있을 거 같다. 잘못된 정보나 더 좋은 정보가 있으면 댓글 남겨주시면 감사하겠습니다

 

 

출처

---

https://api.flutter.dev/flutter/widgets/MediaQuery-class.html