Flutter Riverpod - NotifierProvider

Notifier is a replacement of StateNotifier + ChangeNotifier.

 

아래 예제는 하나의 파일로 작성되었지만 별도의 파일로 Provider 를 추가하는 것을 권장한다.

- 클래스를 구현하고, Notifier 를 상속받고 제네릭 타입을 명시한다.

- 아래 예시는 숫자를 증가시키는 Provider 이므로 counterProvider 를 명명한다.

 

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
 
final counterProvider = NotifierProvider<Counter, int>(() {
  return Counter();
});
 
// Notifier를 상속 받은 클래스만 NotifierProvider에 등록 가능
 
class Counter extends Notifier<int> {
  @override
  int build() => 0; // state 초기값
 
  void increment() => state++;
}
 
 
void main() {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    ),
  );
}
 
class MyApp extends ConsumerWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    int counter = ref.watch(counterProvider);
    return Scaffold(
      body: Center(
        child: Text(
          "$counter",
          style: const TextStyle(
            fontSize: 24,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ref.read(counterProvider.notifier).increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}
 

 

ref.watch는 provider를 입력값으로 받고, state를 리턴하는 함수다.

 

https://riverpod.dev/docs/providers/notifier_provider 를 참조하면 도움된다.