[ flutter ] riverpod

### riverpod 종류

 

1. provider

고정된 값을 제공하거나, 변경되지 않는 의존성을 제공할 때 사용합니다. 예를 들어, 서비스 인스턴스나 설정 값 등이 이에 해당합니다.

 

final myServiceProvider = Provider<MyService>((ref) {
  return MyService();
});

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final myService = ref.watch(myServiceProvider);
    // 여기서 myService를 사용
  }
}

 

 

2. StateProvider

간단한 상태 관리가 필요할 때 사용합니다. 주로 UI의 특정 부분의 상태를 관리하는 데 적합합니다.

 

final counterProvider = StateProvider((ref) => 0);

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return FloatingActionButton(
      onPressed: () => ref.read(counterProvider.notifier).state++,
      child: Icon(Icons.add),
    );
  }
}

 

 

3. StateNotifierProvider

복잡한 상태 로직을 관리할 때 사용합니다. 

StateNotifierProvider는 상태 변경 로직을 StateNotifier 클래스로 분리할 수 있게 해주어, 

상태 관리를 보다 체계적이고 모듈화된 방식으로 할 수 있습니다. 이는 특히 크고 복잡한 애플리케이션에서 유용합니다.

 

class CounterState {
  final int count;
  CounterState(this.count);
}

class CounterNotifier extends StateNotifier<CounterState> {
  CounterNotifier() : super(CounterState(0));

  void increment() {
    state = CounterState(state.count + 1);
  }
}

final counterProvider = StateNotifierProvider<CounterNotifier, CounterState>((ref) {
  return CounterNotifier();
});

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counterState = ref.watch(counterProvider);
    return Scaffold(
      appBar: AppBar(title: Text('StateNotifierProvider 예제')),
      body: Center(child: Text('카운트: ${counterState.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

4. FuterProvider

비동기 연산 결과를 제공하고, 로딩 상태를 관리할 때 사용합니다. 예를 들어, 네트워크 요청의 결과를 표시할 때 유용합니다.

 

final userProvider = FutureProvider<User>((ref) async {
  return fetchUser();
});

class UserWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userAsyncValue = ref.watch(userProvider);
    return userAsyncValue.when(
      data: (user) => Text('사용자: ${user.name}'),
      loading: () => CircularProgressIndicator(),
      error: (e, _) => Text('오류: $e'),
    );
  }
}

 

 

5. ChangeNotifiterProvider

 

ChangeNotifier를 사용하여 좀 더 복잡한 상태 관리를 할 때 사용합니다. 

이 Provider는 Flutter의 기본 상태 관리 클래스인 ChangeNotifier와 함께 사용되며, 

내부 상태가 변경될 때마다 리스너들에게 알림을 보내 UI를 업데이트합니다.

 

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

final counterModelProvider = ChangeNotifierProvider((ref) => CounterModel());

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counterModel = ref.watch(counterModelProvider);
    return FloatingActionButton(
      onPressed: () => counterModel.increment(),
      child: Icon(Icons.add),
    );
  }
}

 

 

6. ScopedProvider

ScopedProvider는 위젯 트리의 특정 부분에 대해 고유한 값을 제공하고자 할 때 유용합니다.

 

final scopedExampleProvider = ScopedProvider<int>((_) => throw UnimplementedError());

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      overrides: [
        scopedExampleProvider.overrideWithValue(10),
      ],
      child: ChildWidget(),
    );
  }
}

class ChildWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    int value = ref.watch(scopedExampleProvider);
    return Text('값: $value');
  }
}