핵심 요약
잡코리아가 Flutter에서 네트워크 이미지를 효율적으로 렌더링해 메모리 사용을 절감하고 Jank를 줄이는 실전 가이드를 제시했습니다.
구현 방법
- Image.network의 cacheWidth/cacheHeight로 디코딩 크기를 디스플레이 크기에 맞춰 조정
- MediaQuery의 devicePixelRatio로 기기별 최적 cacheSize를 동적으로 계산
- num 확장으로 cacheSize(context)처럼 간결한 계산식 구현
- debugInvertOversizedImages, Flutter Inspector로 oversize 이미지 진단
- CachedNetworkImage의 memCacheWidth/memCacheHeight로 캐시 제어
주요 결과
- 디코딩 오버사이즈를 줄여 정상 렌더링을 확보
- 기기별 비율 차이를 반영한 캐시 전략 필요성 확인
- 원본 비율과 위젯 비율 차이 시의 주의점 제시
