[Flutter] 화면 비율에 맞춰 크기 조절하기

플러터로 작업을 하다보면 UI를 전체 화면 비율에 맞춰서 작업하고 싶은 경우가 있는데, 이런 경우 플러터에서 제공하는 방법이 MediaQuery 클래스 이다.

• MediaQuery클래스는 위젯을 동적으로 조정이 가능하고, 다양한 메서드를 제공하는데 화면 비율에 맞춰 크기를 조절하는 방법은 MediaQuery.of(context).size가 있다.

MediaQuery를 사용하지 않았을 경우

• 내부 요소에 따라서 BoxDecoration의 크기가 변경
  

MediaQuery를 사용하지 않았을 경우

• 일정한 크기로 BoxDecoration의 크기가 통일됨

첫 번째 방법

해당 위젯이 렌더링되는 컨텍스트의 MediaQuery를 사용하여 화면 크기에 따라 동적으로 조절

Container(
  height: MediaQuery.of(context).size.height * 0.8,
  width: MediaQuery.of(context).size.width * 0.8,
)

두 번째 방법

MediaQuery에서 크기 정보를 먼저 가져와 변수에 저장한 후, 해당 변수를 사용하여 위젯의 크기를 조절

final Size size = MediaQuery.of(context).size;
Container(
  height: size.height * 0.8,
  width: size.width * 0.8,
)

두 가지 방법 모두 동일한 동작을 수행하지만 코드를 더 가독성 있게 사용하기 위해서는 final Size를 통해 변수를 선언하고 사용하는 것이 더 좋다.