[미디어쿼리 - MediaQuery] 개념 및 사용법

MediaQuery(미디어쿼리) 개념

MediaQuery(미디어쿼리)는 디바이스의 스크린 사이즈 맞게 앱의 스크린 사이즈가 조절이 되어야 할 때 사용하는 것으로 디바이스의 사이즈를 알아낼 수 있고 사용자가 원하는 레이아웃으로 빌드를 할 수 있다.

 

MediaQuery(미디어쿼리) 사용법

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      appBar: AppBar(
        title: const Text('MediaQuery'),
      ),
      body: Center(
        child: Column(
          children: [
            /*
            * MediaQuery -> 디바이스의 사이즈를 알수 있음, 조건에 따라 원하는 레이아웃을 지정 할 수 있음.
            * */
            Text('Width : ' + MediaQuery.of(context).size.width.toString()),
            Text('Height : ' + MediaQuery.of(context).size.height.toString()),
            /*
            * aspectRatio -> 창의 가로 세로 크기의 비율을 알려줌.
            * toStringAsFixed(2) -> 소수점 2자리 까지 표현
            * */
            Text('AspectRatio : ' + MediaQuery.of(context).size.aspectRatio.toString()),
            Text('AspectRatio : ' + MediaQuery.of(context).size.aspectRatio.toStringAsFixed(2)),
          ],
        ),
      ),
    );
  }
}

MediaQuery 사용 결과

 

이번 내용도 코딩셰프 님의 강좌를 보고 직접 실습한 내용을 작성하였습니다. 

감사합니다.

 

출처 및 참고 : https://youtu.be/WCjVqJjD7Ww - [플러터 / Flutter] 순한 맛 시즌 2 | 반응형 레이아웃으로 유튜브 페이지 구조 만들기