플러터 강좌: 12.4 MediaQuery.of(context)

플러터는 다양한 플랫폼에서 일관된 사용자 인터페이스를 제공하기 위해 여러 위젯을 제공합니다. 그 중에서도 MediaQuery는 기기의 화면 크기, 방향, 해상도 등 다양한 정보를 가져오는 데 사용됩니다. 이 강좌에서는 MediaQuery.of(context)를 사용하는 방법을 자세히 설명하겠습니다.

1. MediaQuery란?

MediaQuery는 Flutter의 빌트인 위젯 중 하나로, 앱의 UI가 디바이스의 화면 크기 및 속성에 맞춰 조정될 수 있도록 도와줍니다. 기기가 어떤 환경에 있는지를 파악하여 UI를 최적화할 수 있습니다.

2. MediaQuery.of(context)의 기본 사용법

MediaQuery.of(context)를 사용하면 현재의 BuildContext에 대한 MediaQueryData를 가져올 수 있습니다. 예를 들어, 화면의 너비와 높이를 가져오는 방법은 다음과 같습니다:

    var mediaQuery = MediaQuery.of(context);
    var screenWidth = mediaQuery.size.width;
    var screenHeight = mediaQuery.size.height;
    

3. MediaQuery를 활용한 레이아웃 구성하기

미디어 쿼리를 활용하여 다양한 화면 크기에서 적절한 레이아웃을 구성할 수 있습니다. 예를 들어, 화면의 크기에 따라 다른 위젯을 표시할 수 있습니다.

    @override
    Widget build(BuildContext context) {
        var screenWidth = MediaQuery.of(context).size.width;
        return Scaffold(
            appBar: AppBar(title: Text('MediaQuery 예제')),
            body: Center(
                child: screenWidth < 600
                    ? Text('작은 화면')
                    : Text('큰 화면'),
            ),
        );
    }
    

4. 동적 UI 설계를 위한 MediaQuery 활용하기

플러터에서는 다양한 화면 크기에 맞춰 동적으로 UI를 설계할 수 있습니다. 아래 예제는 화면 크기에 따라 Padding을 달리하는 예제입니다.

    @override
    Widget build(BuildContext context) {
        var padding = MediaQuery.of(context).size.width < 600 ? EdgeInsets.all(20) : EdgeInsets.all(50);
        return Padding(
            padding: padding,
            child: Text('Dynamic Padding Example'),
        );
    }
    

5. MediaQueryData 속성 설명

MediaQueryData는 다양한 속성을 제공합니다. 여기에 대한 설명은 다음과 같습니다:

• size: 디바이스의 화면 크기 (Width, Height)
• orientation: 디바이스의 방향 (세로, 가로)
• devicePixelRatio: 화면의 픽셀 밀도
• padding: 화면의 여백 (Safe Area)
• viewInsets: 소프트웨어 키보드와 같은 UI 요소로 인해 영향을 받는 화면의 부분

6. MediaQuery의 활용 사례

실제 앱에서 MediaQuery를 사용하는 몇 가지 사례를 소개합니다. 주요 사례에는 반응형 디자인, 다양한 디바이스 지원, 동적 레이아웃 조정 등이 있습니다.

6.1 반응형 디자인 예제

반응형 디자인을 활용한 앱의 예로는, 화면의 가로 크기에 따라 리스트 뷰의 아이템 수를 조절하는 것입니다. 여기서는 열의 수를 동적으로 변경하는 방법을 설명하겠습니다.

6.2 다양한 디바이스 지원

MediaQuery를 활용하면 다양한 해상도와 화면 비율을 지원하는 앱을 쉽게 설계할 수 있습니다. 예를 들어, 각 디바이스의 특성에 맞는 UI 요소를 생성할 수 있습니다.

7. 결론

MediaQuery는 플러터에서 디바이스의 환경에 맞춘 레이아웃을 구성하는 데 매우 중요한 요소입니다. 이 강좌를 통해 MediaQuery.of(context)의 기본 사용법과 활용 사례를 배웠습니다. 더 많은 기능과 응용 사례를 실험해 보시기 바랍니다.