[014] 플러터 (Flutter) 배우기 - Image, AssetImage, NetworkImage (이미지 넣기)

안녕하세요~ totally 개발자입니다.

 

Image, AssetImage, NetworkImage

 

오늘 다뤄볼 위젯은 Image입니다. Image는 대표적으로 AssetImage와 NetworkImage로 나뉩니다. AssetImage는 이미 로컬 스토리지에 저장되어 있는 이미지를 활용하는 방법이고, NetworkImage는 웹사이트에 올려진 url을 이용하여 이미지를 표시합니다. 이 2가지 방법을 모두 실습해보도록 하겠습니다.

 

AssetImage

 

먼저 AssetImage입니다. 사용법은 아래와 같습니다.

Step1: 이미지 파일 준비 (assets/images/ 보통 이 경로로 저장해두면 되며 변경 가능합니다)

이미지 준비

Step2: 프로젝트 폴더에 보면 pubspec.yaml이라는 파일이 있는데 여기에 assets: 부분에 68번째 줄처럼 경로를 추가해줍니다.

pubspec.yaml 파일에 경로 명시

Step3: 코드 작성

 

코드 작성

코드를 작성하는데 먼저 Container 크기를 디바이스 사이즈에 맞춰서 지정을 32, 33번째 줄에 먼저 해주었고, Image 위젯의 child 위젯으로 AssetImage 위젯을 사용하여 경로를 명시해주고 fit 속성을 BoxFit.fitWidth로 지정해주었습니다. fit 속성을 사용하면 이미지를 어떤 기준으로 크기를 조절하여 적용할 것인지를 정할 수 있으며 그 속성은 아래와 같습니다.

 

Fit 속성	의미	적용 모습
BoxFit.contain	이미지 비율을 왜곡시키지 않으면서 Parent 위젯의 범위에 맞게 최대로 확대하여 출력합니다.
BoxFit.cover	이미지 비율을 왜곡시키지 않으면서 Parent 위젯을 전부 채울 수 있을 정도로만 축소하여 출력합니다.
BoxFit.fill	이미지를 Parent 위젯의 범위에 가득 채우는 것을 의미하며 필요한 경우, 이미지 비율을 변형해서 출력합니다.
BoxFit.fitHeight	Parent 위젯의 height(높이)에 이미지의 높이를 그대로 맞추는 것을 말하며, 이미지의 비율을 손상시키지 않습니다.
BoxFit.fitWidth	Parent 위젯의 width(길이)에 이미지의 길이를 그대로 맞추는 것을 말하며, 이미지의 비율을 손상시키지 않습니다.
BoxFit.scaleDown	Parent 위젯의 범위에 맞게 이미지의 크기를 줄여서 출력하지만 이미지의 비율을 손상시키지 않습니다.
BoxFit.none	Parent 위젯의 범위 안에 이미지를 정렬하고 이미지가 만약 Parent 위젯의 범위를 초과하는 경우에 그 벗어난 부분을 모두 무시하고 출력합니다.

fit의 속성을 잘 알고 있어야 이미지를 원하는 비율 및 크기로 출력할 수 있기 때문에 꼭 이해하셔야 합니다.

 

 

NetworkImage

 

이번에는 NetworkImage 위젯으로 넘어가겠습니다. AssetImage와 사용 방법이 동일하나 AssetImage에서 로컬 경로가 사용되었던 것과 달리 여기에는 url이 사용됩니다.

 

웹에 올려진 이미지 url를 확인해줍니다. 저는 Pixabay에서 샘플로 사용할 이미지를 구했습니다.

https://cdn.pixabay.com/photo/2017/12/10/13/37/christmas-3009949_1280.jpg

NetworkImage 사용 모습

이렇게 경로에 url를 붙여주기만 하면 바로 적용할 수 있고 fit 속성은 위에 표로 정리해드린 대로 알맞게 선택하여 적용하시면 됩니다. 다음 시간에는 Flexible 위젯에 대하여 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/eY-SvzU-IFk