Flutter Provider ChangeNotifierProvider

이건선·2023년 7월 14일
0

Flutter

목록 보기
3/30

ChangeNotifierProvider

Provider 패키지의 일부로, 상태 관리를 담당하는 객체를 제공하고 해당 상태가 변경될 때마다 위젯 트리에 이를 알리는 역할을 합니다.

ChangeNotifier는 Flutter의 내장 클래스로, 리스너에게 상태 변화를 알릴 수 있는 기능을 가지고 있습니다.

ChangeNotifierProvider는 ChangeNotifier 객체를 생성하고, 그 객체의 수명주기를 관리합니다. 또한, 이 객체의 변경 사항을 위젯 트리에 알려주어 상태 변화에 따라 UI를 업데이트할 수 있게 합니다.

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

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

//...

final counterProvider = ChangeNotifierProvider((ref) => Counter());

//...

class CounterDisplay extends ConsumerWidget {
  
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Text('Count: ${counter.count}');
  }
}

class CounterButton extends ConsumerWidget {
  
  Widget build(BuildContext context, WidgetRef ref) {
    return FloatingActionButton(
      onPressed: () => ref.read(counterProvider).increment(),
      child: Icon(Icons.add),
    );
  }
}

watch(), read(), select()

  1. context.read()
    context.read는 특정 타입의 Provider를 찾아서 현재 상태 값을 반환합니다. 이 메소드는 주로 버튼 클릭 이벤트나 사용자 입력 등에 의해 특정 상태를 변경하고자 할 때 사용됩니다. 이 때 주의해야할 점은 context.read는 해당 Provider의 데이터 변화를 감지하지 못합니다. 즉, context.read를 통해 상태 값을 가져온 위젯은 Provider의 데이터가 변경되더라도 rebuild되지 않습니다.

  2. context.watch()
    context.watch는 context.read와 유사하게 특정 타입의 Provider를 찾아서 현재 상태 값을 반환하지만, Provider의 데이터가 변경될 때마다 위젯을 다시 build합니다. 즉, 상태의 변화를 감지하고 해당 변화에 따라 UI를 업데이트하고자 할 때 사용됩니다.

  3. context.select<T, R>(R cb(T value))
    context.select는 특정 Provider의 상태 중 일부를 선택하여 관찰하고자 할 때 사용됩니다. 첫 번째 타입 인수 T는 Provider의 타입이고, 두 번째 타입 인수 R는 선택하고자 하는 상태의 타입입니다. context.select는 해당 상태가 변경될 때만 위젯을 rebuild합니다.

profile
멋지게 기록하자

0개의 댓글