[flutter] 화면 Size를 알기 및 화면 크기 활용법

앱을 개발하다 보면 다양한 크기의 휴대용 기기에 맞는 앱을 개발하여야 한다.

그렇게 하려면 앱이 동작하는 휴대용 기기의 화면 크기를 알아야 한다.

Flutter에서는 MediaQuery 클래스를 제공한다.

 

사용 방법은

final Size size = MediaQuery.of(context).size 로 사용한다.

size 값이 변경될 필요가 있는 경우 final을 제거하면 된다.

 

여기서 나온 size 값을 가지고

Container(height: size.height * 0.05);

이런 코드를 작성하면 높이 공간이 화면의 크기의 5% 비율인 Container가 생성된다.

Container(height: size.height * 0.1);

이런 코드를 작성하면 높이 공간이 화면의 크기의 10% 비율인 Container가 생성된다.

 

Positioned(

    left: size.width * 0.15

    right: size.width * 0.15

 

Padding(

    padding: EdgeInsets.all(size.width*0.05)

 

참고)

Padding(

    padding: const EdgeInsets.all(size.width*0.05) => 에러 발생

    const는 상수라는 말인데 size가 변수임으로 error 발생