Provider

앱이 커질 수록(커스텀 위젯이 많아질수록) state를 넘기는게 힘들어진다.

이를 위해 등장한 것이 바로 Provider!

📌 셋팅 작업

pubspec.yaml 파일에서

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1 

누른 후에 pub get 하기

그 후 dart파일에 import
import 'package:provider/provider.dart';

---

📌 사용법

Provider를 사용할 경우 state를 위젯 안에 만들지는 않는다.

1. 클래스로 생성

class Store1 extends ChangeNotifier {
	var state1 = 'abc';
}

• class 하나 아무 이름으로 만들고 ChangeNotifier extends
• 이러한 state 보관함을 store라고 하자

2. store 등록

void main() {
  runApp(
      ChangeNotifierProvider(
          create: (c) => Store1(),
          child: MaterialApp(
              theme: style.theme,
              home: MyApp()
          )
      )
  );
}

• 모든 위젯들이 사용하여야 하기 때문에 MaterialApp 을 ChangeNotifierProvider로 감싸준다.
• create로 Store들을 넣어주면됨
• child: 적용할 위젯

🧐 여러개의 Store를 넣어주려면?

void main() {
  runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (c) => Store1()),
          ChangeNotifierProvider(create: (c) => Store2()),
        ],
        child: MaterialApp(
          theme: style.theme,
          home: MyApp(),
        ),
      )
  );
}

• ChangeNot~ 대신에 MultiProvider를 사용하자!
• providers 안에 Store들을 넣고 child는 그 전이랑 동일하다.

3.state 사용/변경하기

class Store1 extends ChangeNotifier { 
	var state1 = 'abc';
 
	changeState() {
    	state1 = 'def';
    	notifyListeners();  
  	}
}

...

ElevatedButton(
  onPressed: (){
    context.read<Store1>().changeState();
  }, 
  child: Text(context.watch<Store1>().state1)
)

• 이렇게 Store안에 함수를 만들어주고 부르면된다.
• notifyListeners(); : 위젯 자동 재렌더링 하기
• context.watch<Store1>().state명 으로 state를 사용하고
• context.read<Store1>().state명 으로 state값을 변경하자

커스텀 위젯이 별로 없을 때는 그냥 하던대로 this 사용해서 state를 보내주자! 그게 더 간단하니까..