Flutter (플러터)

[Flutter] Riverpod(리버팟) - FutureProvider

양승상 2024. 1. 1. 10:59
반응형

https://riverpod.dev/docs/providers/future_provider

 

FutureProvider | Riverpod

The content of this page may be outdated.

riverpod.dev

 

FutureProvider 는 Async 한 코드를 처리하기 위한 Provider 의 한 종류이다.

(외부에서 상태를 제어한다면, AsyncNotifierProvider 를 사용하면 된다.)

 

FutureProvider 는 아래의 상황에서 사용하기 좋다.

  • 네트워크 요청 같은 비동기적인 동작을 하거나 데이터를 캐싱 할 때
    (네트워크 요청을 다시 하지 않도록 값을 저장함)
  • 비동기 동작의 상태를 핸들링할 때 (error, loading, success)
  • 여러 비동기 값을 다른 값으로 조합할 때

 

비동기 처리할 때 3가지 경우가 있을 수 있다.

FutureProvider 는 3가지 경우에 대해, 쉽게 구현할 수 있는 방법이 있다. (자세한건 구현부분에서..)

  1. 정상적으로 비동기 처리가 완료되는 경우
  2. 비동기 처리중 에러가 나는 경우
  3. 비동기 처리 중인 경우

구현

데이터를 로딩 중일 때는 로딩화면을 보여주고, 데이터 로딩이 완료되면 로딩한 이미지를 보여준다.

Future Provider 사용

 

 

1. future provider 생성 

SvgProvider 구성

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

final svgFutureProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 1));
  final svg = await rootBundle.loadString('assets/cat.svg');
  // 출처 : https://pixabay.com/vectors/grooming-cat-kitty-kitten-feline-1801287/
  return svg;
});

 

2. 화면 생성 (UI 에 state provider 적용)

UI 에 FutureProvider 적용

FutureProvider 를 watch 하면 AsyncValue 를 반환한다.

AsyncValue 는 seal class를 통한 패턴매칭을 지원한다.

(AsyncValue 는 존재할 수 있는 값의 상태를 제한(data, error, loading)하고, 제한한 값의 상태별로 구현을 할 수 있게 해준다.)

깜빡하고 구현하지 못하는 경우를 피할 수 있기 때문에 유용하다.

Freezed 패키지에서 이와 유사한 부분을 살펴본적이 있다.

2023.08.24 - [Flutter (플러터)] - [Flutter] Named Constructor, Factory Constructor (Freezed 패키지 when 함수)

 

[Flutter] Named Constructor, Factory Constructor (Freezed 패키지 when 함수)

class Person { late String name; late int age; // Unnamed Constructor 는 하나만 생성 가능하다. Person(this.name, this.age); // Named Constructor Person.fromJson(Map data) { name = data['name']; age = data['age']; } } Unnamed/Named Constructor C++

seungsang.tistory.com

// ...
  @override
  Widget build(BuildContext context) {
    final svg = ref.watch(svgFutureProvider);
    return Scaffold(
        body: Center(
      child: svg.when(
          data: (data) => SvgPicture.string(data),
          error: (e, stackTrace) => Text(e.toString()),
          loading: () => CircularProgressIndicator()),
    ));
  }
// ...
반응형