Modifier에는 family와 autoDispose 두 종류가 있고 어떤 Provider에도 적용시킬 수 있다.

family

생성하기

• Modifier는 어떤 Provider에 사용해도 상관없다. 예제에서는 FutureProvider를 사용해 보겠다.
• Modifier는 사용하는 Provider에 .을 사용해서 추가 할 수 있다.
• family를 사용하게 되면 제너릭과 파라미터에 두번째 값을 넣어줘야한다. 파라미터에는 data를 넣어주고 제너릭에는 data에 해당하는 타입을 넣어주면 된다.

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

  return List.generate(5, (index) => index * data);
});

사용하기

• Family Modifier를 사용하게 되면 Provider를 watch할 때 파라미터를 받는다. 이 파라미터에는 Provider를 생성했을 때 추가했던 data값이 들어가게 된다.
• 5를 넣게 되면 인덱스에 5을 곱한 값이 출력되고 2를 넣으면 2를 곱한 값이 출력된다.

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

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

    return DefaultLayout(
      title: 'FamilyModifierScreen',
      body: Center(
        child: state.when(
          data: (data) => Text(data.toString()),
          error: (err, stack) => Text(err.toString()),
          loading: () => CircularProgressIndicator(),
        ),
      ),
    );
  }
}

autoDispose

생성하기

• FutureProvider를 사용해서 코드를 작성했다.

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

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

사용하기

• FutureProvider와 코드는 별반 차이 없어보이지만 실행보면 차이를 알 수 있다.

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

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

    return DefaultLayout(
      title: 'AutoDisposeModifierScreen',
      body: Center(
        child: state.when(
          data: (data) => Text(
            data.toString(),
          ),
          error: (err, stack) => Text(
            err.toString(),
          ),
          loading: () => CircularProgressIndicator(),
        ),
      ),
    );
  }
}

• 버튼을 누르면 로딩표시가 2초동안 표시되고 리스트가 반환된다. 그러고 다시 뒤로가기 하고 페이지에 들어오면 또 다시 로딩 상태가 되면서 리스트가 반환된다. 원래 FutureProvider는 데이터가 캐싱이 되면서 뒤로가기 해도 데이터가 보존이 된다. 하지만 autoDispose를 사용하면 뒤로가기 하는 순간 데이터는 삭제가 되면서 다시 로딩이 된다.
• 따라서 autoDispose는 사용하지 않을 때 데이터가 삭제 되어야 할 때 사용 하면된다.