[Flutter] 이미지 로딩 느림 현상2 - CachedNetworkImage 구현

❗️이미지 느림 현상2
Pagination으로 대량의 데이터 로딩 속도는 조금 해결했는데, 아직도 이미지 로딩하는 속도가 생각보다 느리다ㅠㅠ

firestore 무료 버전이라 한계가 있는 것 같긴하지만, 이미지 캐시를 사용하면 조금 더 단축할 수 있다는 사실을 알게 돼서 구현해보려 한다.

바로 CachedNetworkImage을 사용하는 것이다!

CachedNetworkImage란?

• 한번 로드한 이미지를 캐시로 관리하여, 재활용 가능하게 해주는 디펜던시! 두번째 접속부터는 로딩 속도가 훨씬 빨라진다.
• 로컬 장치에 캐시 데이터가 저장되는 것!

[코드]

Opacity(
                      opacity: bool_Grid[index] ? 0.3 : 1,
                      child: CachedNetworkImage(
                        imageUrl: _imageList[index]['img'],
                        placeholder: (context, url) => Center(
                          child: CircularProgressIndicator(),
                        ),
                        errorWidget: (context, url, error) => Icon(Icons.error),
                        fit: BoxFit.cover,
                      ),
                    ),

imageUrl 로드할 이미지 url
placeholder 이미지 로딩 중일 때 화면에 보여줄 임시 이미지. 보통 로딩인디케이터를 띄우는데, 이미지로 첨부도 가능함
errorWidget error시 보여줄 아이콘

[적용 전]

[적용 후]

두번째 접속시엔 확실히 빨라진 것을 볼 수 있다 !

참고
https://pub.dev/packages/cached_network_image