[flutter] Riverpod를 사용하여 앱의 사진 업로드 기능을 관리하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력한 도구입니다. 사진 업로드와 같은 기능을 관리하기 위해 Riverpod를 사용하는 방법을 살펴보겠습니다.

1. 프로바이더 생성

먼저, Provider 함수를 사용하여 업로드 상태를 관리할 프로바이더를 생성합니다. 다음 코드는 uploadState라는 프로바이더를 생성하는 예시입니다.

final uploadStateProvider = Provider((ref) => UploadState());

2. 업로드 상태 모델 만들기

다음으로, 업로드 상태를 나타내는 모델을 만듭니다. 이 모델에는 업로드 진행 상태와 업로드된 사진 URL 등의 필드가 포함됩니다.

class UploadState {
  bool isLoading = false;
  String uploadedImageUrl = '';
  
  // 업로드 상태 갱신 함수
  void updateLoading(bool loading) {
    isLoading = loading;
  }
  
  // 업로드된 사진 URL 갱신 함수
  void updateImageUrl(String url) {
    uploadedImageUrl = url;
  }
}

3. 업로드 페이지 빌드하기

이제 업로드 페이지를 빌드하고 Riverpod를 사용하여 업로드 상태를 관리할 수 있습니다. 다음은 업로드 페이지의 예시 코드입니다.

class UploadPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, watch, _) {
        final uploadState = watch(uploadStateProvider);

        return Column(
          children: [
            // 사진 업로드 버튼 등의 UI
            ElevatedButton(
              onPressed: () async {
                // 업로드 상태를 업데이트하여 로딩 표시
                uploadState.updateLoading(true);
                
                // 사진 업로드 로직
                final imageUrl = await uploadImage();
                
                // 업로드된 사진 URL을 업데이트
                uploadState.updateImageUrl(imageUrl);
                
                // 업로드 상태를 업데이트하여 로딩 표시 제거
                uploadState.updateLoading(false);
              },
              child: Text('사진 업로드'),
            ),
            
            // 로딩 상태 확인하여 로딩 스피너 또는 업로드된 사진 표시
            uploadState.isLoading 
                ? CircularProgressIndicator()
                : Image.network(uploadState.uploadedImageUrl),
          ],
        );
      },
    );
  }
}

4. 업로드 상태 사용하기

업로드 상태를 사용하기 위해 Consumer 위젯 내에서 watch 함수를 사용하여 프로바이더를 구독합니다. 이렇게하면 업로드 상태가 변경될 때마다 화면이 자동으로 업데이트됩니다.

위의 예시 코드에서는 uploadState.isLoading을 사용하여 로딩 상태를 확인하고, 업로드된 이미지 URL을 Image.network 위젯으로 표시하고 있습니다.

이와 같이 Riverpod를 사용하여 Flutter 앱의 사진 업로드 기능을 효과적으로 관리할 수 있습니다. Riverpod를 사용하면 상태 관리를 단순화하고 코드의 가독성을 향상시킬 수 있습니다. 더 자세한 내용은 Riverpod의 공식 문서를 참조하시기 바랍니다.

참고: