[Flutter] 이미지(Image), 이미지 로딩 모션 만들기 #Image #Image.memory #Image.network #frameBuilder #errorBuilder

앱을 만들게되면 '이미지'를 다루는 일은 기본입니다.

플러터에서는 제가 알기로 Image, ImageProvider 이렇게 두 가지 방식으로 이미지를 표현할 수 있는데요.

 

'Image'위젯을 사용해서 표현하는 방법을 설명하고자 합니다.

총 네 가지 방식을 제공합니다.

- Image.network : 인터넷을 통하여 이미지 로드

- Image.file : 파일을 통하여 이미지 로드

- Image.memory : bytes값을 통해 이미지 로드

- Image.asset : 로컬 Asset폴더를 통해 이미지 로드

 

 

화질이 높은 이미지일 수록 그 이미지를 표현하기 위해서 컴퓨터는 계산을 하게 됩니다.

계산하는 동안 화면에 아무런 표시도 되어있지 않아도 상관은 없지만,

사용자의 입장에서 고려해보면 무언가 이미지가 나올것인가? 라는 기대감과

기다릴 수 있게하는 인내심을 주지 않을까요?

 

그래서 저는 이미지가 로드되는 동안 LoadingProgressbar를 표현하려고 합니다.

 

FutureBuilder를 통해서 받은 이미지 데이터를 'Image.memory'함수에 추가하였습니다.

그리고 frameBuilder와 errorBuilder를 설정해주었습니다.

 

 

이미지가 로드되는 동안 프로그레스바 표시하기

위의 언급되었던 frameBuilder를 통해서 표현할 수 있습니다.

child는 이미지 위젯을 뜻 합니다.

 

wasSynchronouslyLoaded는 동기화가 되었는지 확인해주는 파라메터입니다.

동기화가 되었다면 바로 child(이미지 위젯)을 보여주어도 되겠지만,

이미지를 로드한다는 것은 비동기 작업이기 때문에 아마 true일 일은 많이 없을겁니다.

frame은 현재 이미지가 로드가 완료되어 객체가 되었는지를 알려주는 것 입니다.

frame이 null이 아니라는건 이미지가 정상적으로 로드된 것을 뜻하기 때문에 child를 return해줍니다.

 

그 이외의 상황이라면 LoadingProgressbar를 보여주면 되겠습니다.

frame == null

frame != null

 

그러면 위와 같이 frame이 null이 아닌 동안 else하위의 LoadingProgressbar가 표현되게 됩니다.

 

+ 추가로 errorBuilder는 이미지가 정상적으로 로드되지 못한 경우 실행됩니다.

그러므로 이미지가 로드되지 못한 경우 보여줄 이미지 위젯을 선언해주면 되겠습니다.

 

 

감사합니다🍊