[플러터(Flutter)] - 이미지를 캐시에 저장하기 (cached _network_image)

사용 이유  👀

처음에는 사실 이러한 방법이 있는지도 잘 알지 못했지만 최근 플러터 스터디를 통해 알게 되었다. 😃

먼저, 우리가 이미지를 가져올 때는 보통 Image.network('URL') 방식으로 사용하는데, 이렇게 하게 되면

매 사진이 필요할때마다 서버에 접속해야 하고, 사진이 엄청나게 많을 경우 속도가 오래 걸릴 수도 있다. (비용 + 시간)

하지만 자주 사용하는 사진이라면 이렇게 사용하는것은 비효율적으로 느껴질 것이다.  때문에 바로 사용자의 로컬 저장소에 있는 캐시 저장소를 이용하는 것이다. 이 방식을 이용하면 처음에는 캐시에 저장을 해야 하기 때문에 바로 사진을 가져오는 것보다는 느릴 수 있어도, 2번째부터는 훨씬 빠른 속도를 보여준다 

(확실하진 않지만 유튜브나 넷플릭스같이 많은 사진을 보여주는곳도 다 이러한 방식을 사용한다고 하더라) 

사용 방법  👀

https://pub.dev/packages/cached_network_image

cached_network_image | Flutter Package

가장 먼저 늘 그렇듯 라이브러리를 추가하는 것이다. (pubspec.yaml)

다음으로, 사용할 페이지에서 해당 라이브러리를 import 해주도록 한다.

* cached_network_image 예시 코드

 

이제 이미지를 띄울 예시 코드를 작성한다 

class cachedNetwork extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image'),
        ),
        body: Column(
          children: [
              // 이곳에 이미지를 넣을 것이다. 
          ],
        )
      ),
    );
  }
}

이제 해당 children 에 cached_network_image 방식과, 일반 Image.network 방식을 둘 다 사용하여 어떻게 다른지 살펴보도록 하자. 

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class cachedNetwork extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image'),
        ),
        body: Column(
          children: [
            
            CachedNetworkImage(        // 1번 
              imageUrl: "https://picsum.photos/250?image=5",
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
            
            Image.network("https://picsum.photos/250?image=5"),    // 2번
          ],
        )
      ),
    );
  }
}

참고로 picsum.photos 는 해당 사이즈의 사진을 랜덤으로 불러와준다. 뒤에 숫자를 지정하면 숫자에 해당하는 이미지가 불러와진다

 

위를 보면 파랗게 돌아가는 것이 cached_network_image 방식인데,

일반 image_network 사진이 먼저 불러와지고, 그다음 cached_network_image 방식이 불러와지는 것을 볼 수 있다.

 

만약 한 번 더 실행하게 되면 어떻게 될까?

위와 같이 cached_network_image가 더 빨리 불러와지는것을 볼 수 있다

 

 

참고 👀

캐시에 저장된 데이터를 며칠동안 갖고 있을지 등 여러 가지 캐시에 대해 관리하려면 아래의 라이브러리를 이용할 수도 있다.

https://pub.dev/packages/flutter_cache_manager

flutter_cache_manager | Flutter Package

cached_network_image와 비슷한 extended_image라는 라이브러리도 있는데 이것도 캐시를 이용하는 방법이다

https://pub.dev/packages/extended_image

extended_image | Flutter Package

 

이렇게 내가 알지 못했던 유용한 정보들도 많았는데,

스터디를 통해 하나하나 알아가서 참 좋다. 이래서 다들 스터디 스터디 하는구나 싶다 앞으로도 열공!!