Flutter 강좌 - [Image] 캐쉬 이미지 사용법 | CachedNetworkImage

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

지난 강좌에서는 Image와 FadeInImage 위젯을 통해 온라인상의 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 이 위젯들을 이용하면 스크린을 출력할 때 마다 매번 온라인상에서 이미지를 다운로드하여 화면에 출력하게된다.

만약 한번 다운로드한 이미지를 캐시로 관리하면서 재활용할 수 있다면 매번 다운로드하는 비용을 절감할 수 있고, 오프라인 상태에서도 이미지를 출력할 수 있는 장점이 있다. 이러한 기능은 CachedNetworkImage 위젯이 제공한다.

CachedNetworkImage 이미지는 외부 패키지에서 제공하는 위젯이므로 pubspec.yaml 파일의 dependencies 항목에 패키지를 추가한다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  cached_network_image: ^0.4.2

 

소스코드는 다음과 같다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Cached Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Center(
          // CachedNetworkImage 추가. 한번 다운로드하면 재활용 가능
          child: CachedNetworkImage(
            placeholder: CircularProgressIndicator(),
            imageUrl: 'https://picsum.photos/250?image=7',
          ),
        ),
      ),
    );
  }
}

 

CachedNetworkImage 위젯을 사용하기 위해 해당 패키지를 import 했다.

Scaffold의 body에 CachedNetworkImage를 추가하고 있다. 사용법은 FadeInImage 위젯의 사용법과 유사하다.

 

실행화면은 다음과 같다. 앱이 설치되고 처음 실행될 때에는 기존의 FadeInImage 위젯을 사용할 때와 동일하게 실행되지만 그 다음부터는 이미지로딩시간이 현저하게 줄어든다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

https://flutter.dev/docs/cookbook/images/cached-images

Work with cached images

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱