MediaQuery

MediaQuery란?

MediaQuery는 Flutter에서 제공하는 위젯으로, 현재 디바이스(실행하고 있는 앱)의 다양한 화면 정보를 얻을 수 있게 해준다. 이를 통해 화면 크기, 화면 방향, 텍스트 크기 조정, 밝기 설정 등의 정보에 접근할 수 있다.

 

 

MediaQuery의 주요 속성들

1. size: 화면의 크기를 제공한다.
2. devicePixelRatio: 논리적 픽셀당 물리적 픽셀 수를 나타낸다.
3. textScaleFactor: 사용자가 설정한 텍스트 크기 배율이다.
4. platformBrightness: 현재 디바이스의 밝기 모드(라이트/다크)를 알려준다.
5. padding: 화면의 패딩 정보를 제공한다.
6. viewInsets: 키보드와 같은 시스템 UI로 인한 가려진 영역 정보를 제공한다.

 

 

MediaQuery 사용하기

MediaQuery를 사용하는 가장 일반적인 방법은 MediaQuery 클래스에서 .of(context) 메서드를 호출하는 것이다.

이 메서드는 현재 context에서 가장 가까운 MediaQuery를 반환한다.

실행 화면:

 

 

MediaQuery.of(context)와 build 함수의 BuildContext context 파라미터 간의 관계

 

1. BuildContext 클래스의 역할:

• BuildContext 클래스는 위젯 트리에서 현재 위젯의 위치에 대한 정보를 제공한다.
• BuildContext 클래스는 위젯 트리에서 현재 위젯의 위치를 나타내며, 위젯 트리의 부모와 자식 관계를 탐색하는 데 사용된다.
• 이는 위젯의 부모, 조상, 테마, MediaQuery 등의 정보에 접근할 수 있게 해준다.

 

2. build 함수의 context 파라미터 (BuildContext 클래스의 인스턴스 = context)

• Flutter의 모든 StatelessWidget과 State 클래스의 build 메서드는 BuildContext를 파라미터로 받는다.
• 이 context는 현재 위젯의 BuildContext를 나타낸다.
• context는 위젯 트리에서 현재 위젯의 위치를 나타내며, 이를 통해 부모 위젯이나 다른 위젯의 정보를 얻을 수 있다.
• 예를 들어, MediaQuery.of(context)를 사용하여 현재 화면의 크기나 방향 등의 정보를 얻을 수 있다.

 

3. MediaQuery.of(context) 메서드:

• 이 메서드는 주어진 context를 사용하여 위젯 트리를 거슬러 올라가며 가장 가까운 MediaQuery 위젯을 찾는다.
• MediaQuery.of 메서드는 주어진 BuildContext의 인스턴스인 context를 통해 현재의 미디어 쿼리 데이터를 반환하는 역할을 한다.
• 찾은 MediaQuery 위젯의 데이터를 context를 통해 반환한다.

 

4. 연결: 

• build 함수에서 받은 context를 MediaQuery.of(context)에 전달함으로써, 현재 위젯의 위치에서 가장 가까운 MediaQuery 정보를 얻을 수 있다.
• 이를 통해 현재 화면의 크기, 방향, 밝기 모드 등의 정보에 접근할 수 있다.