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

30 Nov 2023

flutter

이미지 로딩은 대부분의 앱에서 중요한 기능 중 하나입니다. 플러터의 Riverpod 라이브러리를 이용하면 이미지 로딩을 간편하게 처리할 수 있습니다. Riverpod는 의존성 주입을 편리하게 처리해주는 상태 관리 라이브러리입니다.

1. Riverpod 라이브러리 설치

Riverpod 라이브러리를 사용하기 위해서는 pubspec.yaml 파일에 다음과 같이 의존성을 추가해야 합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0

이후 터미널에서 flutter pub get 명령을 실행하여 의존성을 설치합니다.

2. 이미지 로딩을 위한 Provider 생성

이미지 로딩을 위해 Riverpod 상태 프로바이더를 생성합니다. image_provider.dart 파일을 생성하고 다음과 같이 코드를 작성합니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' as http;

final imageProvider = Provider.family<AsyncValue<Image>, String>((ref, url) async {
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final image = Image.memory(response.bodyBytes);
    return image;
  } else {
    throw Exception('Failed to load image');
  }
});

위 코드에서 imageProvider는 AsyncValue<Image> 타입의 프로바이더입니다. http 패키지를 사용하여 이미지를 다운로드하고, 다운로드된 이미지를 Image.memory() 메서드를 사용하여 생성합니다. 이미지 다운로드가 실패할 경우 Exception을 던집니다.

3. 이미지 로딩 및 표시

이미지 로딩을 위해 Consumer 위젯을 사용하여 imageProvider 프로바이더를 구독합니다. 특정 URL을 이용하여 이미지를 로딩하고 결과를 처리하는 예제 코드는 다음과 같습니다:

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

import 'image_provider.dart';

class ImageLoader extends ConsumerWidget {
  final String imageUrl;

  ImageLoader({required this.imageUrl});

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final imageAsyncValue = watch(imageProvider(imageUrl));

    return imageAsyncValue.when(
      data: (image) => Image(image: image),
      loading: () => CircularProgressIndicator(),
      error: (error, stackTrace) => Text('Error loading image'),
    );
  }
}

위 코드에서 imageProvider(imageUrl)로 프로바이더를 호출하여 URL을 전달하고, watch 메서드로 프로바이더의 상태를 감시합니다. imageAsyncValue는 AsyncValue<Image> 타입의 변수로, 이미지 로딩 상태에 따라 다른 위젯을 반환합니다. 데이터 로딩 중일 때는 CircularProgressIndicator를, 에러가 발생했을 때는 Text('Error loading image')를 표시합니다. 데이터 로딩이 완료되면 Image 위젯에 로딩된 이미지를 표시합니다.

4. 이미지 로딩 예제 사용하기

이미지 로딩을 테스트해보기 위해 다음과 같이 예제를 사용합니다:

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

import 'image_loader.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        title: 'Image Loader',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Image Loader'),
          ),
          body: ImageLoader(imageUrl: 'https://example.com/image.jpg'),
        ),
      ),
    );
  }
}

ImageLoader 위젯에 imageUrl으로 이미지 URL을 전달하여 실행해보면, 이미지가 성공적으로 로딩되거나 에러가 발생하는지 확인할 수 있습니다.

이상으로 Riverpod를 사용한 플러터 이미지 로딩 처리 방법에 대해 알아보았습니다. Riverpod를 통해 의존성 주입을 편리하게 관리하고 이미지 로딩을 간편하게 구현할 수 있습니다. 이를 활용하여 앱의 이미지 로딩을 개선할 수 있습니다.

관련 문서: Riverpod GitHub Repository