[Flutter] MediaQuery.of(context) 사용시 문제점

MediaQuery에 대해

---

플러터에서는 MediaQuery라는 클래스가 존재한다.

MediaQuery는 앱이 실행 중인 장치의 화면에 대한 정보를 가져오기 위한 용도로 사용하며 화면의 사이즈를 포함한 다양한 기능들을 제공하고 있다.

Flutter에서 반응형 UI를 사용하기 위해서는 없어서는 안 될 존재이며, 이를 이용해 다양한 UI 기능을 제공하는데 도움을 줄 수 있다.

 

MediaQuery 가 제공하는 기능들

---

MediaQuery를 사용할 때는 MediaQuery.of(context).[property] 를 이용해 원하는 프로퍼티를 가져와 사용할 수 있다.

현재 3.24.0 기준으로 MediaQuery에서 제공하는 기능은 다음과 같다. 

• size
• withNoTextScaling
• withClampedTextScaling
• viewPadding
• viewInsets
• systemGestureInsets
• supportsShowingSystemContextMenu
• plaformBrightness
• padding
• orientation
• onOffSwichLabels
• accessibleNavigation
• navigationMode
• invertColors
• highContrast
• gestureSettings
• displayFeatures
• disableAnimations
• devicePixelRatioOf
• boldText
• alwaysUse24HourFormat
• textScaler

거의 20개가 넘어가는 어마무시한 양이다.

많은 분들도 그렇겠지만 여기서 주로 내가 자주 사용하는 프로퍼티는 size와 orientation이다.

 

 

무엇이 문제일까?

---

MediaQuery.of(context)는 앞서 얘기한 것처럼 20여 개가 넘어가는 데이터들을 모두 제공해 주도록 도와주고 있다. 

그러나 우리가 만약 화면의 크기를 알아내고 싶을 땐 MediaQuery.of(context).size를 사용하게 되는데, 만약 size가 바뀔 경우 자동으로 해당 위젯을 rebuild를 하여 새로운 값을 넣어주게 된다.

하지만 MediaQuery.of(context)는 size만의 데이터가 바뀌었을 때 rebuild 되는 것이 아니라 MediaQuery에서 제공하는 20여 개의 프로퍼티 중 하나라도 변경될 때 rebuild를 하게 되는 것이다.

 

간단히 아래의 예제를 통해 확인해 보도록 하겠다.

 

 

해당 코드에서는 orientation 즉 화면의 방향이 바뀌었을 때 called build라는 글자를 표시하도록 해뒀다.

만약 화면의 방향이 바뀌게 되면 rebuild가 되는 구조가 된 것이다.

 

그런데 내가 여기서 화면의 사이즈를 변경해 봤다.

 

그리고 콘솔창의 출력을 확인해 봤다.

 

 

 

나는 화면의 orientation 값만 받고 있는데 화면의 사이즈가 바뀌니깐 쓸데없이 rebuild가 호출된 것이다.

이게 바로 MediaQuery.of(context)의 문제점이다.

MediaQuery.of(context)의 관련된 값 중 하나라도 변경되면 위젯 전체를 rebuild 하게 되는 것이다.

 

해결하는 법

---

 

정말로 원하는 값인 orientation만 받고 나머지의 변경은 무시하도록 하는 방법이 있다.

 

답은 간단하다.

 

MediaQuery. [property] Of(context)를 사용하는 것이다.

만약 size값의 대한 변경에 대해 rebuild 하고 싶다면

MediaQuery.sizeOf(context)를 사용하면 되고

 

orientation값에 대한 변경만 rebuild 하고 싶다면 

MediaQuery.orientationOf(context)를 사용하면 된다.

 

다만 이 방법은 Flutter 3.10부터 개선된 사항이라 업데이트 이후에 사용이 가능하다.

 

 

아래의 영상을 참고

https://www.youtube.com/watch?v=xVk1kPvkgAY