Flutter Riverpod All Providers (5-4) - FutureProvider

FutureProvider는 Provider와 동일하지만 비동기 코드를 위한 것입니다.

 

FutureProvider는 일반적으로 다음과 같은 용도로 사용됩니다:

• 비동기 작업(예: 네트워크 요청) 수행 및 캐싱
• 비동기 작업의 에러/로드 상태 처리
• 여러 비동기 값을 다른 값으로 결합하는 작업

FutureProvider는 ref.watch와 결합하면 많은 이점을 얻을 수 있습니다. 이 조합을 사용하면 일부 변수가 변경될 때 일부 데이터를 자동으로 다시 가져올 수 있으므로 항상 최신 값을 유지할 수 있습니다.

INFO)
FutureProvider는 사용자 상호 작용 후 계산을 직접 수정하는 방법을 제공하지 않습니다. 간단한 사용 사례를 해결하기 위해 설계되었습니다. 보다 복잡한 경우에는 AsyncNotifierProvider를 사용하는 것이 좋습니다.

사용 사례: 설정 파일 읽기

FutureProvider는 JSON 파일을 읽어 생성된 Configuration 객체를 노출하는 편리한 방법이 될 수 있습니다.

 

설정 생성과 같은 작업은 일반적인 async/await 구문을 사용하되, provider 내부에서 수행합니다. Flutter의 에셋 시스템을 사용하면 이렇게 됩니다:

@riverpod
Future<Configuration> fetchConfiguration(FetchConfigurationRef ref) async {
  final content = json.decode(
    await rootBundle.loadString('assets/configurations.json'),
  ) as Map<String, Object?>;

  return Configuration.fromJson(content);
}

그러면 UI가 다음과 같은 구성을 수신할 수 있습니다:

Widget build(BuildContext context, WidgetRef ref) {
  final config = ref.watch(fetchConfigurationProvider);

  return config.when(
    loading: () => const CircularProgressIndicator(),
    error: (err, stack) => Text('Error: $err'),
    data: (config) {
      return Text(config.host);
    },
  );
}

그러면 Future가 완료되면 UI가 자동으로 리빌드됩니다. 동시에 여러 위젯이 해당 구성을 원하는 경우 에셋은 한 번만 디코딩됩니다.

 

보시다시피 위젯 내부의 FutureProvider를 수신하면 오류/로딩 상태를 처리할 수 있는 AsyncValue가 반환됩니다.