[flutter] CachedNetworkImage precaching : 미리 캐싱하여 다음 뷰에 바로 나타날 수 있게 하기

Hero를 이용하는데

이전화면 -> 이후화면으로 들어갈 때

이전화면에서 List에 들어있는 이미지들은 Caching문제로 resizing된 이미지를 보이고 있고

이후화면에서는 원본화질을 보이고싶었다.

 

Hero로 넘어가지만 이후화면에서의 원본의 Caching 타이밍이 너무 길어

원본사진 공간에서 Caching하는 동안의 빈공간화면이 노출된다.

placeHolder에서 resizing된 이미지를 보이려고 하지만 빈공간이 보여지는 순간은 사라지지 않는다.

그래서 이전화면의 리스트에서 한 아이템를 눌렀을 때
해당 원본 이미지를 미리 캐싱(precache)하고 
완료된 이후에 다음화면으로 보내게 하였다.

이때, 단순히 url만 보내면 안되고
preCache된 이미지의 imageProvider를 갖고있다가
이후화면의 생성자에 넣어서보내고
그대로 이용해야한다.

 

Hero안에서 자연스럽게 resizing -> 원본화질로 전환될 수 있게끔 하려고 했다.

 

---

 

해결법:

 

이전화면-

onTap: () async{
        //Hero진행 중, resizedImage에서 자연스럽게 원본화질로 전환되려면 원본화질을 precache해야한다.
        CachedNetworkImageProvider theImage = CachedNetworkImageProvider(
          data.img,
        );
        await precacheImage(theImage, context);

        Navigator.of(context).push(CupertinoPageRoute(
            builder: (BuildContext context) =>
                NextPage(
                    .
                    .
                    .
                    imageProvider: theImage,
                  ),
                ));
      },

 

이후화면 -

.
.
.
Hero(
	tag: widget.tagIdx,
	child: Image(
		image: widget.imageProvider,
		width: _width,
		height: _width,
		fit: BoxFit.cover,
),
.
.
.