[Flutter] Image Widget

21. 10. 5.

- Could -

1. Image Widget
    - Image.asset
    - Image.network

1. Image Widget

항상 Widget이 궁금하다면 Doc확인이 우선이다.

https://api.flutter.dev/flutter/widgets/Image-class.html

Image class - widgets library - Dart API

Flutter 공식 유투브 채널에서는 Widget of the week라고 해서 Flutter가 기본으로 제공하는 Widget들을 설명해주고 있으니 참고해볼만 하다.

https://youtu.be/7oIAs-0G4mw

 

Image Widget은 기본적으로 Flutter 프로젝트에 image를 넣기 위해 사용한다.

여기서는 Image.asset을 이용해 가지고 있는 사진파일을 직접 앱에 추가하는 방식과, Image.network를 이용해 이미지 URL을 넣는 방식을 살펴보자.

 

---

Image.asset

flutter에서 이미지를 넣는 가장 일반적인 방법이다. 앱 자체에 image파일을 넣어두고 사용한다. 그렇게 만들어 두면 인터넷이 안되는 환경에서도 이미지가 정상출력된다는 점과 비교적 빠른 로딩속도를 기대해 볼 수 있다. 하지만 앱 자체에 이미지가 포함되는 방식이라 앱 용량이 늘어난다.

 

1) assets 폴더 만들기

앱의 최상위 위치에 assets 폴더를 만들어주자. assets 말고 images나 다른 폴더명을 사용해도 되지만, 앱 개발을 하다보면 image 파일 말고도 다른 assets들을 사용할 일이 생길수도 있다.

그래서 개인적으로 assets/images/ 와 같은 경로를 만들어 이미지를 관리하는 걸 선호한다. 자기가 어떤 경로에 폴더를 만들고 이미지파일들을 관리할지만 생각해두면 마음대로 해도 상관 없다.

 

first_app이라는 프로젝트 아래 assets폴더를, 그리고 그 하위폴더로 images 폴더를 만들어 주었다.

폴더를 만들었으면 그 안에 이미지파일을 드래그앤드롭(Darg&drop)으로 넣어준다.

assets이나 images 같은 폴더를 만들때는 단수형이 아닌 복수형으로 만들기를 권장한다.
누가 때려죽여도 나는 단수형으로 만들어야겠다면 어쩔수 없지만... 폴더안에 들어갈 요소'들'을 생각한다면 복수형으로 명명하는게 좀 더 자연스럽다.

 

2) pubspec.yaml에 assets 등록하기

폴더를 만들고 이미지까지 넣었지만 flutter는 아직 이 폴더와 이미지의 존재를 모른다. 사용하려면 pubspec.yaml 파일에 한가지 작업을 해주어야한다. 이 부분에서 경로를 잘못적거나, 스페이스를 두칸 띠어야 되는데 세칸 띠거나 해서 에러를 많이들 겪으니, 주의하기 바란다.

초록색 주석으로 된 글씨들을 읽어보면 assets를 사용하는 법이 적혀있다.

저 초록색 글씨들이 보기 싫다면 깔끔하게 지워버려도 아무 상관없다. 아래와 같이 고쳐주면 된다.

중요한건 스페이스 두칸이다.

flutter:
  assets:
    - assets/images/

이런 식의 구조로 작성해야 한다. 전부 두칸씩 들여쓰기다. 기억해라.

assets: 의 다음 줄에는 이미지가 있는 폴더 경로를 적어준다. 위에 화면처럼 폴더 경로만 적어줘도 되고, 그 앞 사진에 보이는 초록색 글씨 처럼 이미지이름과 확장자까지 적어줘도 된다.

 

이렇게 파일내용을 수정하면 pubspec.yaml 파일을 변경한 거기 때문에 pub update를 해주어야한다.

저기 보이는 Get dependencies나 Upgrade dependencies를 눌러주면 된다.

 

3) Image.asset Widget 작성하기

이제 원하는 위치에 Image.asset을 넣어보자.

flutter 프로젝트를 생성하면 제공되는 데모 코드의  Column안을 날리고 Image.asset을 넣었다.

Image.assets('assets/images/파일명.확장자')

Widget을 넣고 싶은 자리에 위와 같이 적어주면 된다. 앞에 assets/images/는 이미지가 들어있는 폴더 경로이자, 아까 pubspec.yaml파일에 넣어둔 경로. 자신이 만들어놓은 폴더이름과 경로가 다르다면 그걸로 적어야한다.

잘나온다.

---

Image.network

Image.network의 사용법은 훨씬 더 간단하다. 웹에 있는 url만 입력해주면 되기때문에 image.asset과 같이 번거롭지는 않다. 하지만 인터넷 연결이 안되어있는 상황에서는 이미지가 로드되지 않고, assets을 이용하는 것보다는 이미지 로딩에 시간이 더 소요된다는 문제가 있다.

Image.network('이미지url')

이게 다다. 진짜다. 믿어달라.

 

---

☝️ 깨알Tip.
대소문자의 구분은 중요하다.
일반적으로 Flutter에서 Widget들은 대문자로 시작한다. 이는 Dart에서 class의 이름을 명명할때 대문자로 하는 Coding Convention을 가지고 있는데, Widget도 결국 class의 일종이므로 대문자로 시작한다.