• Future 타입만 반환가능하다
• API 요청의 결과를 반환 할 때 자주 사용한다.
• 복잡한 로직 또는 사용자의 특정 행동 뒤에 Future를 재실행하는 기능은 없고 1회성이라고 생각하면 된다.

생성하기

• async 요청을 가정해서 예제를 작성해 보겠다.
• 2초 뒤에 리스트를 반환하는 Provider를 작성했다.

final multipleFutureProvider = FutureProvider<List<int>>(
  (ref) async {
    await Future.delayed(
      Duration(
        seconds: 2,
      ),
    );

    return [1, 2, 3, 4, 5];
  },
);

• multipleFutureProvider를 watch()하는 state를 선언하고, state를 사용하면 when()이라는 위젯타입의 함수를 사용할 수 있다. when()은 3개의 파라미터를 받는데 data는 로딩이 끝나고 나서 데이터가 있을 때 실행되고, error를 에러가 발생했을 때 실행되고, loading은 로딩중일 때 실행이 된다.

class FutureProviderScreen extends ConsumerWidget {
  const FutureProviderScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final AsyncValue state = ref.watch(multipleFutureProvider);

    return DefaultLayout(
      title: 'FutureProviderScreen',
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          state.when(
            data: (data) {
              return Text(
                data.toString(),
                textAlign: TextAlign.center,
              );
            },
            error: (err, stack) => Text(
              err.toString(),
            ),
            loading: () => Center(
              child: CircularProgressIndicator(),
            ),
          ),
        ],
      ),
    );
  }
}

• FutureProvider는 futureBuilder처럼 데이터가 캐싱이 되는 특징을 가지고 있다.