꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 Image와 FadeInImage 위젯을 통해 온라인상의 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 이 위젯들을 이용하면 스크린을 출력할 때 마다 매번 온라인상에서 이미지를 다운로드하여 화면에 출력하게된다. 만약 한번 다운로드한 이미지를 캐시로 관리하면서 재활용할 수 있다면 매번 다운로드하는 비용을 절감할 수 있고, 오프라인 상태에서도 이미지를 출력할 수 있는 장점이 있다. 이러한 기능은 CachedNetworkImage 위젯이 제공한다. CachedNetworkImage 이미지는 외부 패키지에서 제공하는 위젯이므로 pubspec.yaml 파일의 dependencies 항목에 패키지를 ..

Flutter 강좌 목록 : https://here4you.tistory.com/120 지난 강좌에서는 Image.network() 위젯을 이용해서 온라인 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 온라인상에서 이미지를 다운로드를 할 때 일정시간이 소요되고 이 시간동안 스크린에는 아무것도 출력되지 않는다. 이는 UX 적으로 적절하지 못하다. 해결방법으로는 이미지가 준비되어 출력될 때 까지 이미지를 대신할 뭔가를 사용자에게 보여서 앱이 바쁘게 준비중임을 알리면 된다. 우선 실행화면을 살펴보자. 이미지가 출력되기 전에 둥그란 모양의 프로그레스 인디케이터를 출력하여, 조만간 뭔가가 출력될 것이라는 것을 사용자에게 알릴 수 있다. 또한 페이드인(Fade-in) 효과로 이미지가 서서히 나타나는 효..