Flutter ChangeNotifierProvider

이건선·2023년 7월 15일
0

Flutter

목록 보기
9/30
class Counter with ChangeNotifier {
  int counter = 0;

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

class Translations with ChangeNotifier {
  late int _value;

  void update(Counter counter) {
    _value = counter.counter;
    notifyListeners();
  }

  String get title => 'You clicked $_value times';
}

...

Scaffold(
      appBar: AppBar(
        title: Text('ChangeNotifierProvider ChagneNotifierProxyProvider'),
      ),
      body: Center(
        child: MultiProvider(
          providers: [
            ChangeNotifierProvider<Counter>(
              create: (_) => Counter(),
            ),
            ChangeNotifierProxyProvider<Counter, Translations>(
              create: (_) => Translations(),
              update: (
                BuildContext _,
                Counter counter,
                Translations? translations,
              ) {
                translations!..update(counter);
                return translations;
              },
            ),
          ],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ShowTranslations(),
              SizedBox(height: 20.0),
              IncreaseButton(),
            ],
          )
          
          ...

ChangeNotifierProxyProvider

ChangeNotifier의 변화를 감지하고, 그에 따라 자신의 상태를 업데이트하는 역할을 합니다.

  1. 위의 코드에서 Counter 객체의 상태가 변하면 Translations 객체의 update 메서드가 호출됩니다.

  2. Counter의 현재 카운트 값을 _value에 저장합니다.

  3. title getter를 통해 'You clicked $_value times'라는 문자열을 얻을 수 있게 됩니다.

즉, ChangeNotifierProxyProvider는 한 상태(Counter)가 바뀌었을 때, 이를 감지하고 다른 상태(Translations)를 업데이트하게 해주는 역할을 합니다.

ShowTranslations 위젯에서는 Translations의 현재 title을 보여주고, IncreaseButton에서는 Counter의 increment 메서드를 호출하여 카운트 값을 증가시킵니다. Counter의 상태가 변하면 이를 Translations이 감지하고 _value를 업데이트하므로, 'You clicked $_value times'라는 메시지가 새로운 카운트 값으로 업데이트됩니다.

ChangeNotifierProxyProviderupdate 함수

  1. BuildContext: Flutter의 위젯 트리에서 현재 위치를 알아내는 데 사용됩니다. 이 정보는 종종 테마나 로케일 같은 context-specific 정보에 접근하는 데 필요하며, Provider 패키지가 다른 위젯의 상태를 접근할 때도 사용됩니다. 여기서는 실제로 사용되지 않아 _로 표시되어 있습니다.

  2. Counter counter: ChangeNotifierProxyProvider는 하나의 ChangeNotifier를 다른 ChangeNotifier에 연결하는 데 사용됩니다. 여기서 첫 번째 ChangeNotifierCounter입니다. 이 Counter 인스턴스는 업데이트 함수에서 사용될 수 있습니다.

  3. Translations? translations: ChangeNotifierProxyProvider의 두 번째 ChangeNotifier입니다. update 함수는 이 인스턴스를 업데이트하고 반환해야 합니다. 이 예에서는 Counter의 변화에 따라 Translations 인스턴스를 업데이트하고 있습니다.

profile
멋지게 기록하자

0개의 댓글