Flutter에서 cached_network_image 패키지 사용법과 옵션

cached_network_image 패키지는 Flutter 앱에서 네트워크 이미지를 캐시하여 로드하는 동안 사용자 경험을 향상시키는 데 도움을 줍니다.

이 블로그 포스트에서는 cached_network_image 패키지를 Flutter 프로젝트에 통합하는 방법과 주요 옵션에 대해 자세히 설명하겠습니다.

1. cached_network_image 패키지 설치

먼저 cached_network_image 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.1

그런 다음, 터미널에서 pub get 명령어를 실행하여 패키지를 설치합니다

flutter pub get

2. 기본 사용법

cached_network_image를 사용하여 네트워크 이미지를 캐시하고 표시하는 기본 방법은 매우 간단합니다. 예제를 통해 살펴보겠습니다

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) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://via.placeholder.com/150',
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

위 코드에서 CachedNetworkImage 위젯은 이미지를 캐시하여 표시합니다. imageUrl 속성에는 로드할 이미지의 URL을 지정하고, placeholder 속성에는 이미지를 로드하는 동안 표시할 위젯을, errorWidget 속성에는 이미지 로드 실패 시 표시할 위젯을 지정할 수 있습니다.

3. 주요 옵션

3.1 Placeholder

placeholder는 이미지를 로드하는 동안 표시할 위젯을 지정합니다. 보통 로딩 스피너를 사용합니다.

placeholder: (context, url) => CircularProgressIndicator(),

3.2 Error Widget

errorWidget은 이미지 로드 실패 시 표시할 위젯을 지정합니다.

errorWidget: (context, url, error) => Icon(Icons.error),

3.3 Fade In Animation

fadeInDuration과 fadeOutDuration을 사용하여 이미지가 로드될 때 페이드 인/아웃 애니메이션을 지정할 수 있습니다.

fadeInDuration: Duration(milliseconds: 500),
fadeOutDuration: Duration(milliseconds: 500),

3.4 Image Cache Manager

cacheManager를 사용하여 캐시된 이미지를 관리할 수 있습니다. 기본 캐시 매니저를 사용하거나 사용자 정의 캐시 매니저를 사용할 수 있습니다.

cacheManager: CacheManager(Config(
  'customCacheKey',
  stalePeriod: Duration(days: 7),
)),

3.5 Fit

fit 속성을 사용하여 이미지를 컨테이너에 맞추는 방법을 지정할 수 있습니다. 예를 들어, BoxFit.cover, BoxFit.contain 등을 사용할 수 있습니다.

fit: BoxFit.cover,

3.6 Height 및 Width

height와 width 속성을 사용하여 이미지의 높이와 너비를 지정할 수 있습니다.

height: 150,
width: 150,

3.7 Alignment

alignment 속성을 사용하여 이미지를 정렬할 수 있습니다. 예를 들어, Alignment.center, Alignment.topLeft 등을 사용할 수 있습니다.

alignment: Alignment.center,

4. 전체 예제 코드

위에서 설명한 옵션들을 포함한 전체 예제 코드는 다음과 같습니다

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://via.placeholder.com/150',
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
            fadeInDuration: Duration(milliseconds: 500),
            fadeOutDuration: Duration(milliseconds: 500),
            cacheManager: CacheManager(Config(
              'customCacheKey',
              stalePeriod: Duration(days: 7),
            )),
            fit: BoxFit.cover,
            height: 150,
            width: 150,
            alignment: Alignment.center,
          ),
        ),
      ),
    );
  }
}

이 예제 코드는 cached_network_image의 다양한 옵션을 사용하여 네트워크 이미지를 캐시하고 로드하는 동안 로딩 스피너를 표시하며, 로드 실패 시 에러 아이콘을 표시합니다.

또한, 페이드 인/아웃 애니메이션과 사용자 정의 캐시 매니저를 설정하고, 이미지를 컨테이너에 맞추어 정렬합니다.

결론

cached_network_image 패키지는 Flutter 앱에서 네트워크 이미지를 효율적으로 로드하고 캐시하여 사용자 경험을 향상시키는 데 매우 유용한 도구입니다.

이 블로그 포스트에서는 패키지 설치부터 기본 사용법, 주요 옵션, 전체 예제 코드까지 다양한 방법을 설명했습니다.

이를 통해 Flutter 앱에서 이미지를 더욱 효율적으로 관리하고 사용자에게 더 나은 경험을 제공할 수 있습니다.

 

 

 

 

Tester Share [테스터쉐어] - Google Play 앱

 

나비일기장 [수발일기장] - Google Play 앱