Provider Study 1-2

1. Consumer
   생성과 소비를 한번에 할 수 있음

Consumer<Dog>(
          builder: (BuildContext context, Dog dog, Widget? child) {
       // context , provider , child => child를 쓰면 재빌드 할 필요가 없을 때는 따로 밖으로 빼서 쓸 수 있음!
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  child!,
                  const SizedBox(
                    height: 10,
                  ),
                  Text(
                    '- name: ${dog.name}',
                    style: const TextStyle(fontSize: 20.0),
                  ),
                  const SizedBox(height: 10.0),
                  const BreedAndAge(),
                ],
              ),
                        );
          },
          // rebuild 시키고 싶지 않을 때 쓰면 좋습니다.! child라는 친구를
          child: const Text(
            "I like dogs very much",
            style: TextStyle(fontSize: 20.0),
          ),
        )

ChangeNotifierProvider<Foo>(
        create: (_) => Foo(),
        child: Consumer<Foo>(
          builder: (BuildContext context, Foo foo, Widget? _) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    foo.value,
                    style: const TextStyle(fontSize: 40),
                  ),
                  const SizedBox(height: 20.0),
                  ElevatedButton(
                    onPressed: () => foo.changeValue(),
                    child: const Text(
                      'Change Value',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                ],
              ),
            );

1-1. error
main.dart에 새로운 프로바이드를 더한 후에 핫 리로드 시킴
프로바이드를 읽을 수 있도록 다른 루트를 사용해라
빌드 컨텍스트를 이용해서 return을 받는 구조로 만들어서 사용해라(마치 위젯이 있는 거 같은 컨텍스트를 얻을 수 있음)
consumer를 이용해서 만든다.

2. Selector
   consumer보다 더 세세하게 컨트롤할 수 있음 (consumer랑 비슷함. 위젯!?)

Selector<Dog, String>(
          // 앞에는 여러개의 프로퍼티를 가지는 오브젝트의 타입  뒤에는 그 중에서 사용할 프로퍼티의 타입
          selector: (BuildContext context, Dog dog) => dog.name,

          builder: (BuildContext context, String name, Widget? child) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  child!,
                  const SizedBox(
                    height: 10,
                  ),
                  Text(
                    '- name: $name',
                    style: const TextStyle(fontSize: 20.0),
                  ),
                  const SizedBox(height: 10.0),
                  const BreedAndAge(),
                ],
              ),
            );
          },
          // rebuild 시키고 싶지 않을 때 쓰면 좋습니다.! child라는 친구를
          child: const Text(
            "I like dogs very much",
            style: TextStyle(fontSize: 20.0),
          ),
        )

3. Provdier Access
   프로바이더의 엑세스!

   context가 available 하지않을 때 builder를 쓰거나 builder 위젯을 써서 엑세스 했었음

프로바이더 엑세스는 네비게이션과 관련이 있음!

정해지지않은 라우트 엑세스

 ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (_) {
                  return ChangeNotifierProvider.value(
                      value: context.read<Counter>(),
                      child: const ShowMeCounter());
                }));
              },
              child: const Text(
                "Show me Counter",
                style: TextStyle(fontSize: 20),
              ),
            ),

네임드 라우트 엑세스

 routes: {
        '/': (context) => ChangeNotifierProvider.value(
            value: _counter, child: const MyHomePage()),
        '/counter': (context) => ChangeNotifierProvider.value(
            value: _counter, child: const ShowMeCounter()),
      },

제네레이트 라우트 엑세스

 onGenerateRoute: (RouteSettings settings) {
        // RouteSettings를 이용해서 onGenerateroute를 통해 라우팅 등록
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(
              builder: (context) => ChangeNotifierProvider.value(
                value: _counter,
                child: const MyHomePage(),
              ),
            );
          case '/counter':
            return MaterialPageRoute(
              builder: (context) => ChangeNotifierProvider.value(
                value: _counter,
                child: const ShowMeCounter(),
              ),
            );
        }
        return null;
      },