본 포스트에서는 플러터(Flutter)의 useMediaQuery 훅(hook)을 사용하여 반응형 디자인을 구현하는 방법에 대해 살펴보겠습니다.

1. useMediaQuery란?

useMediaQuery는 플러터에서 제공하는 훅(hook) 중 하나로, 현재 화면의 크기와 방향에 따라 반응형 디자인을 구현할 수 있도록 도와줍니다. 이를 통해 다양한 디바이스의 화면 크기에 대응하는 앱을 쉽게 작성할 수 있습니다.

2. useMediaQuery 사용하기

우선, useMediaQuery 훅을 사용하기 위해서는 flutter/material.dart를 import 해야 합니다.

import 'package:flutter/material.dart';

그리고 다음과 같이 useMediaQuery를 사용하여 반응형 디자인을 구현할 수 있습니다.

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  final isLandscape = mediaQuery.orientation == Orientation.landscape;

  return Scaffold(
    appBar: AppBar(
      title: Text('반응형 디자인'),
    ),
    body: Column(
      children: <Widget>[
        if (isLandscape)
          Text('가로 모드'),
        if (!isLandscape)
          Text('세로 모드'),
      ],
    ),
  );
}

위의 예제에서는 현재 화면의 방향에 따라 다른 UI를 보여주는 간단한 예시를 보여주고 있습니다.

3. 결론

useMediaQuery 훅을 사용하면 간단하게 반응형 디자인을 구현할 수 있으며, 다양한 디바이스에 쉽게 대응할 수 있는 플러터 앱을 개발할 수 있습니다.

위의 예시를 참고하여, 여러분의 플러터 앱에 useMediaQuery를 활용하여 반응형 디자인을 적용해보시기 바랍니다.

참고: Flutter 공식 문서 - MediaQuery