[flutter] 해상도에 따라서 이미지를 자동 지정하는 방법

플러터에서 이미지를 해상도에 따라 자동으로 지정하는 방법

우리가 만든 앱은 모바일 뿐만 아니라 태블릿, 데스크탑에서도 사용자가 이용할 수 있습니다. 그러다 보니 모바일에만 초점을 맞춰서 디자인을 하게 되면, 태블릿에서는 상당한 여백이 생겨서 우리가 의도한 디자인과 멀어지게 되고, 가독성 마저 떨어질 수 있습니다.

 

예를 들어, 모바일에서 사용되는 이미지 크기가 너무 작다면, 태블릿에서는 당연히 더 작아 보이겠죠? 그렇다고 크기가 큰 이미지를 사용하기에는 오히려 모바일에서 낭비인 것 같고요.

 

이런 경우에는 사용자가 이용 중인 기기의 해상도에 맞춰서 이미지를 변경해주는 방법이 있습니다. 그럼 플러터에서 어떻게 기기, 해상도에 따라서 자동으로 이미지를 불러오도록 설정하는지 알아보겠습니다.

 

해상도 폴더 생성하기

방법은 간단합니다. 다음과 같이 2.0x, 3.0x 폴더를 생성하고, 동일한 이름의 파일을 각각의 폴더에 추가하면, 플러터에서 알아서 해상도에 맞춰 이미지를 자동으로 불러옵니다.

 

이미지 위젯을 사용해서 assets 폴더에 위치한 이미지를 사용하는 방법이 궁금하시면 다음 글을 참고하시면 됩니다.

 

👉🏻 플러터에서 로컬, 네트워크 이미지 사용하는 방법

 

그럼 즐거운 플러터 개발하시길 응원하겠습니다. 감사합니다~😊