Provider study 1

Provider 강의를 듣고 다른 분들과 스터디를 진행

1. Provider / MultiProvider
   상태관리를 위해 쓰임..
   provider는 ui에 영향을 미치는 스테이트 핸들링하는 것에 영향을 미치지 않음(수단만 제공)

  return Provider<Counter>( // Counter class에 대한 프로바이더 생성!
      create: (_) => Counter(), //(_)은 아무것도 사용하지 않을 떄사용 context가 들어간다면 해당 context이용
      child: MyCounter(), // Counter의 숫자를 보여주는 위젯이 들어갈 것이다.
    );

MultiProvider는 Provider를 하나로 묶어서 사용하게 해준다.
(위에 있는 친구가 우선적으로 쓰인다.

// 예시 뒤에서 설명할 예정
MultiProvider(
      providers: [
        ChangeNotifierProvider<Dog>(
          create: (context) => Dog(name: "dog06", breed: "Dogbreed", age: 3),
        ),
        // 퓨처프로바이더보다 상위 프로브라이더라 가능
        FutureProvider<int>(
          initialData: 0,
          create: (context) {
            final int dogAge = context.read<Dog>().age;
            final babies = Babies(age: dogAge);
            return babies.getBabies();
          },
        ),
      ],

2. Provider (context로 이용하기)

위에 처럼 생성하지만 사용은 아래처럼 사용하면 좋을 것이다.

context.read<T>() => Provider.of<T>(context, listen:false)
context.watch<T>() => Provider.of<T>(context)
context.select<T,R> (R selector(T value)) ->R (프로퍼티를 많이 가지고 있는 오브젝트에 특정 프로퍼티의 변화만 (listen 반복) 받고 싶을 때 => 선별적으로 가능 )

소비하기 위한 선언은 Provider.of(context)
read / watch의 차이는 listen의 유무로인한 재빌드까지 생각하기

3. ChangeNotifierProvider

class를 만들어 changeNotifier를 mixin(with) 해준다 또는 extends 시켜줌.

  import 'package:flutter/foundation.dart';

class Dog with ChangeNotifier {
  final String name;
  final String breed;
  int age;

  Dog({required this.name, required this.breed, this.age = 2});

  void grow() {
    age++;
    notifyListeners();
  }
}

생성은 아래와 같이 해줌!

  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Dog>(
  // changeNotifierProvider로 만들고 create는 필수
      create: (context) => Dog(name: "KingDog", breed: "DogSpecial"),
      child: MaterialApp(
        title: 'My Dog',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }

소비는 아래와 같이 해줌

  Text(
'- name: ${Provider.of<Dog>(context, listen: false).name}',
  style: const TextStyle(fontSize: 20.0),
            ),  

4. FutureProvider / StreamProvider
FutureBuilder 와 StreamBuilder로 대체가능!