[Flutter] 리스트뷰(ListView) 스크롤시 사진 등 재로딩되는 현상 해결 방법

매우 자주 사용하는 위젯 중 하나인데, 사용하면서 한가지 문제를 발견했다.

ListView에 담긴 내용에는 텍스트, 여러 사진들, 구글 지도 등이 포함되어 있었다.

그런데 문제는 예를 들어, 사진이 보이지 않는 곳까지 스크롤을 했다가 다시 돌아오면 사진이 다시 로딩되는 경우가 발생한다.

지도의 경우도 지도가 안보이는 영역까지 스크롤했다가 빠르게 돌아오면 지도가 다시 로딩되는 경우가 발생한다.

일단 이것의 원인은 리스트뷰 위젯이 메모리 관리를 위해 보이는 부분과 일부 주변 영역에 대해서만 불러오고 표시하기 때문이다.(캐싱을 하지 않는 것이다.)

그래서 느리게 천천히 스크롤하면 해당 문제가 없는 것처럼 보인다.

이 문제를 해결하기 위해 스크롤 하여 안보이는 곳으로 이동한다해도 그 공간의 내용들을 캐싱해놓는 것이다.

다행히도 ListView에 cacheExtent라는 속성이 존재한다. 이것은 보이는 영역으로부터 얼마만큼의 주변 영역까지 캐싱해놓을지 지정하는 속성이다.

 

픽셀 값이므로 자신이 필요한 만큼 지정해서 사용하면 된다. 무조건 크게 해놓으면 해당 문제는 발생하지 않겠지만 메모리 관련하여 문제가 발생할 수 있으므로 상황에 맞게 적용하는 것이 좋을 것 같다.