[Flutter] 대량 네트워크 이미지의 로딩

ListView로 Network.Image를 여러개 그릴경우, 생각보다 느리게 이미지로딩이 되는것을 확인 할 수있다.

대량 이미지의 로딩속도가 느린경우에 대체이미지를 제공해준다면 사용자는 이미지로딩이 느린것을 크게 체감하지 못할 수 있다.

그러므로 이미지로딩이 부드럽게 이어지도록 구현해보자.

 

 Container(
    width: width,
    height: 180,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0), color: Colors.grey),
    child: CachedNetworkImage(
      imageUrl: url,
      imageBuilder: (context, imageProvider) => ClipRRect(
        borderRadius: BorderRadius.circular(8.0), //필요에따라
        child: Image(
          image: imageProvider,
          fit: BoxFit.cover,
        ),
      ),
      placeholder: (context, url) => Shimmer(
        gradient: shimmerGradient,
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color: Colors.black),
            width: width,
            height: 180),
      ),
      errorWidget: (context, url, error) => Container(
        width: width,
        height: 180,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            color: Colors.grey),
        child: Image.asset(
          'asset내부의 에러이미지',
        ),
      ),
    )
  );

 

Stack으로 겹친 스켈레톤UI도 구현해보고 Network.Image의 loadingBuilder, frameBuilder 등을 구현해보았지만

CachedNetWorkImage와 Shimmer을 사용한 방식이 가장 부드러운처리가 가능했던것같다.

 

 

https://pub.dev/packages/cached_network_image

cached_network_image | Flutter package

https://pub.dev/packages/shimmer

shimmer | Flutter package

 

두 패키지를 사용해서 네트워크 이미지로딩시에 처리를 개선해봤다.