[flutter] 플러터 Riverpod를 사용한 이미지 캐싱 처리 방법

30 Nov 2023

flutter

이미지 캐싱은 모바일 애플리케이션에서 이미지를 효율적으로 로딩하고 보여주기 위해 사용되는 중요한 기술입니다. 플러터에서는 flutter_cache_manager와 같은 패키지를 사용하여 이미지 캐싱을 구현할 수 있지만, 이번에는 Riverpod와 함께 직접 이미지 캐시를 처리하는 방법에 대해 알아보겠습니다.

1. flutter_cache_manager 설치

먼저, flutter_cache_manager를 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음의 코드를 추가하세요:

dependencies:
  flutter_cache_manager: ^3.2.0

의존성을 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치하세요.

2. ImageProvider 클래스 구현

이미지 캐싱을 위해 ImageProvider 클래스를 구현해야 합니다. ImageProvider는 Image 위젯에서 이미지를 로딩하기 위해 사용되는 클래스입니다.

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';

class CachedImageProvider extends ImageProvider<CachedImageProvider> {
  final String url;

  const CachedImageProvider(this.url);

  @override
  Future<CachedImageProvider> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture<CachedImageProvider>(this);
  }

  @override
  ImageStreamCompleter load(CachedImageProvider key, DecoderCallback decode) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(key),
      scale: 1.0,
      informationCollector: () sync* {},
    );
  }

  Future<ui.Codec> _loadAsync(CachedImageProvider key) async {
    var file = await DefaultCacheManager().getSingleFile(url);
    var bytes = await file.readAsBytes();
    return await PaintingBinding.instance.instantiateImageCodec(bytes);
  }
}

위의 코드는 CachedImageProvider라는 클래스를 정의합니다. 이 클래스는 ImageProvider를 확장하고, 로딩할 이미지의 URL을 받아 캐시에서 이미지를 로드합니다.

3. 이미지 캐싱 사용하기

이제 이미지 캐싱을 사용하기 위해 Riverpod를 도입해보겠습니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/widgets.dart';

final cachedImageProvider = Provider<ImageProvider>((ref) {
  return CachedImageProvider(
    'https://example.com/image.jpg',
  );
});

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final imageProvider = watch(cachedImageProvider);
    
    return Image(
      image: imageProvider,
      fit: BoxFit.cover,
    );
  }
}

위의 코드에서 cachedImageProvider는 Provider를 통해 이미지를 제공하는데 사용됩니다. MyWidget의 빌드 메서드에서 cachedImageProvider를 watch 함수를 통해 감지하고, 이미지를 가져온 후 Image 위젯에 적용합니다.

결론

Riverpod와 flutter_cache_manager를 사용하여 플러터 애플리케이션에서 이미지 캐싱을 처리하는 방법에 대해 배웠습니다. 이를 통해 애플리케이션의 성능을 향상시킬 수 있고, 사용자에게 빠르고 부드러운 이미지 로딩 경험을 제공할 수 있습니다.

1. flutter_cache_manager 설치

2. ImageProvider 클래스 구현

3. 이미지 캐싱 사용하기

결론

참고 자료