Flutter ChangeNotifier / MultiProvider Provider

시작하기 전, provider를 Pub get 해주어야 함

* pubspec.yaml 확인

// 예시
dependencies:
  provider: ^6.0.1

 

1. 선언방법

1.1. 우선 ChangeNotifier을 선언

class Store extends ChangeNotifier {
  var name = 'sibong';

  changeName() {
    name = 'seokbong';
    notifyListeners();  // re-rendering 해주세요.
  }
}

 

1.2. 위 Store 내부의 변수 및 함수를 사용할 위젯을 ChangeNotifierProvider로 감싸줌

void main() {
  // MaterialApp 내의 모든 위젯에서 사용하기 위해 ChangeNotifierProvider로 감싸줌
  // create는 필수값이며 매개변수로 context를 넣어주어야함(c)
  // create로 Store 클래스를 지정
  // child에 MaterialApp을 지정 (그냥 Store를 쓸 앱을 감싸준다고 생각하면 된다)
  runApp(
    ChangeNotifierProvider(
      create: (c) => Store(),
      child: MaterialApp(
        theme: style.theme,
        home: const MyApp(),
      ),
    )
  );
}

 

 2. 사용방법

// 변수 사용방법
context.watch<Store>().name

// 함수 사용방법
context.read<Store>().changeName();

 

* 보너스 : 여러 Provider를 사용하고 싶은 경우.

void main() {
  runApp(
    // 여러개를 등록하겠다!
    MultiProvider(
      providers: [
        // Store와 subStore를 등록! 
        ChangeNotifierProvider(create: (c) => Store()),
        ChangeNotifierProvider(create: (c) => subStore()),
      ],

      child: MaterialApp(
        theme: style.theme,
        home: const MyApp(),
      ),
    )
  );
}

...(대충 코드)

// 사용법은 동일함!