[Flutter] Provider에 대해서 사용법에 대해 실제 예제코드로 알아보자

 

1. 들어가기에 앞서

Provider란 InheritedWidget을 보다 쉽게 사용할 수 있도록 도와주는 상태관리 패키지입니다.

1. 작성해야 하는 코드 감소

2. 원하는 위젯만 선택적으로 갱신 가능

3. Lazy loading 지원

4. 상태를 별도 클래스로 분리하므로 StatefulWidget 보다 유지 관리 용이

- 단점

1. Provider가 부모 위젯으로 등록되어 있지 않은 경우, 자식 위젯에서 접근시 런타임 에러가 발생

2. 위젯 트리상에 등록시 의존성 순서 중요

 

---

2.  Provider 사용해보기

 

2-1. Provider 사용법 간략 설명

Provider는 ChangeNotifier를 상속받아서, 변경사항이 있는 경우에 notifyListener()를 호출하여 자식 위젯들을 갱신 합니다.

💡 DartPad에서 Provider를 이용한 상태 관리 예시
https://dartpad.dev/?id=d7b22cc9ba4dfa4bd71b2583a94e31b4

 

ChangeNotifierProvider(
  create: (context) => FirstProvider(),
  child: const MaterialApp(
    home: HomeScreen(),
  ),
);

InheritedWidget을 부모 위젯으로 추가했던 것과 마찬가지로, Provider도 위젯 트리에 다음과 같이 추가해야 자식 위젯들이 접근을 할 수 있게 도와줍니다.

Widget build(BuildContext context) {
    print('reBuild');
    FirstProvider provider = context.watch<FirstProvider>();

    return Scaffold(
      body: Center(
        child: Text('${provider.counter}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => provider.increment(),
        child: const Icon(Icons.plus_one),
      ),
    );
  }

자식위젯에서는 context.watch()로 Provider에 접근할 수 있어서 만약 listen하고 있는 값들의 변동사항이 생긴다면

notifyListener()를 호출하고 새롭게 Build()함수가 화면을 새롭게 갱신하게 됩니다.

💡 context.watch()는 Provider패키지에서 extension으로 Buildcontext를 확장하여 구현한 함수 입니다.

 

---

2-2. 값 읽기

값을 읽는 방법으로는 공식문서에서는 3가지 방법을 설명하고 있습니다.

1. context.watch<T>() : 위젯이 T의 변화를 감지할 수 있도록 합니다.
== Provider.of<T>(context, listen : true)

2. context.read<T>() : T를 변화 감지 없이 return 합니다.
== Provider.of(context, listen : false)

3. context.select<T, R> : T의 일부 작은 영역에 대해서만 위젯이 변화를 감지할 수 있도록 합니다.

간단하게 상태가 변화되서 재빌드를 하고 싶을때는 watch를 아닐경우는 read를 사용하면 됩니다.

이 말은 즉, read는 값이 변경되었을 때 위젯을 재빌드 하지 않으므로 stf widget에서는 사용할 수가 없다는 의미가 됩니다.

 

---

2-3. Provider의 선택적 의존 및 다중 Provider

context.watch<Model>()

위 코드에서 만약 Model이라는 Provider가 존재하지 않는다면
ProviderNotFoundException 예외가 발생하게 됩니다.

그래서 매칭되는 provider를 찾지 못했을 경우에는 null값을 반환하도록 하기 위해서는

context.watch<Model?>()

위 처럼 사용하면 됩니다.

다만 provider가 존재하지 않는 경우를 지원하는 케이스가 뭐가 있는지 모르겠습니다...

(provider가 존재하니깐 read/watch를 사용하는건데... null값이 있을리가..있나?)

있으니깐 지원하겠죠..?

 

두번째로는 MultiProvider입니다.

지금까지 배운 내용으로는 만약 등록하려는 Provider가 2개 이상일 경우는

Provider<Something>(
  create: (_) => Something(),
  child: Provider<SomethingElse>(
    create: (_) => SomethingElse(),
    child: Provider<AnotherThing>(
      create: (_) => AnotherThing(),
      child: someWidget,
    ),
  ),
),

이렇게 작성해야 할텐데 가독성이 매우 좋지 않습니다.

이를 아래와 같이 작성할 수 있습니다.

MultiProvider(
  providers: [
    Provider<Something>(create: (_) => Something()),
    Provider<SomethingElse>(create: (_) => SomethingElse()),
    Provider<AnotherThing>(create: (_) => AnotherThing()),
  ],
  child: someWidget,
)

위 두 코드는 완전히 동일하게 작동하고, MultiProvider는 단순히 코드의 외관을 바꿔줄 뿐입니다.

 

---

2-4. ProxyProvider란?

ProxyProvider란 3.0.0 버전부터 새롭게 추가된 기능입니다.

다른 provider들의 여러 값을 하나의 객체로 묶어 Provider로 전달하는 provider 입니다.

그러면 해당 신규 객체는 우리가 의존하는 provider 중 하나가 업데이트 될때마다 업데이트 됩니다.

 

공식문서를 읽으면서 이걸 도대체 언제 쓰는거지..? 라는 생각이 들었습니다.

아래 예시와 함께 어떨때 사용하면 좋은지 보면 좋을 것 같습니다.

int count;

Provider(
  create: (_) => MyModel(count),
  child: ...
)

위와 같이 Provider에  변경될 수 있는 변수로 객체를 만든다고 가정해봅시다.

이렇게 생성을 했다고 한다면, 생성된 객체는 값이 변화해도 업데이트가 되지 않을 것 입니다.

또한, 실제로 공식문서에도 이렇게 사용하지 말라고 권장합니다.

int count;

ProxyProvider0(
  update: (_, __) => MyModel(count),
  child: ...
)

이렇게 ProxyProvider를 통해서 시간에 따라 변경될 수 있는 변수로를 객체에 전달할 수 있습니다.

여기서 ProxyProvider에 있는 숫자는 ProxyProvider가 의존하는 다른 공급자의 수 입니다.

 

https://dartpad.dev/?id=71e1f23bf7076de716bcb30811a7eb8d

자세한 내용은 위 링크를 참고해주세요

1초마다 변경되는 현재 시간의 값의 변수를 ProxyProvider에 전달하여 객체를 만든 예제입니다.

 

---

2-5. Consumer

consumer란 watch와 동일하나, 특정 위젯만 갱신할 수 있습니다.

기본적으로는 상태가 변하게 되면 Build()함수부터 재빌드가 시작되는데

Cosumer로 위젯을 감싸면 상태가 변경되면 그 안에서만 상태가 변경되게 됩니다.

https://dartpad.dev/?id=c9d05cc219059a84e3d832c49c84a87e

'MyApp build() 실행 됨' 이라는 텍스트는 한번만 출력이 되고

counter의 값이 증가해도 Cosumer 안에서만 상태가 변하기 때문에

'MyApp build() 실행 됨'은 더이상 실행되지 않는 것을 볼 수 있습니다.

 

---

2-6. Selector

select와 동일하나, 특정 위젯만 갱신 합니다.

https://dartpad.dev/?id=070c0a54bec23b5bc158791db90ba0c2

DartPad

 

---

3. Provider 제공자

만약 변경사항을 알릴 필요가 있는 클래스는

ChangeNotifierProvider를 사용하면 됩니다.

하지만 변경사항을 알릴 필요가 없다면 Provider를 사용하면 됩니다.