Flutter Provider를 이용한 상태관리

 

 

 태블릿 앱을 완료 후에 태블릿 앱에서 얻은 point를 사용할 APP을 만들어야 했다.

 기존 버전의 APP이 있었지만 kotlin으로 작성이 되어있었고, IOS 앱도 출시하길 원했기에 flutter로 작업을 진행했다.

 앱 기획 상 대규모 작업이 아니였기에 Bloc,Get X 가 아닌 provider로 상태관리를 했다.

 또한 태블릿 앱에서 지체됐던 시간을 단축시키기 위함도 있었다.
 

 

 

 

 

 

https://pub.dev/packages/provider

provider | Flutter package

 

Provider란?

Provider는 Flutter에서 상태 관리를 쉽게 만드는 도구

데이터를 효과적으로 제공하고 변경할 수 있는 방법을 제공

상태를 관리하고 그 상태에 따라 UI를 업데이트 한다

리액트의 Redux와 비슷하다고 생각하면 좋을 듯 싶다.

 

특징

1. 위젯 트리의 어느 곳에서나 필요한 데이터에 쉽게 접근 가능

2. 간결하고 직관적인 API로 코드의 가독성이 좋고 유지 보수하기도 용이

3. 대규모 프로젝트에는 적합하지 않음.

4. 러닝커브가 낮다.

 

사용방법

 1. 상태 클래스 정하기

class pointStore extends ChangeNotifier{
  var incomes = 0;
  var spents = 0;
  var current = 0;

    notifyListeners(); // 변경됐음을 알린다.
}

 

 

2. app의 최상단에서 적용

MultiProvider(
  providers: [
   
    ChangeNotifierProvider(create: (context) => pointStore()),
    ChangeNotifierProvider(create: (context) => userStore()),
    ChangeNotifierProvider(create: (context) => footerStore()),
    
  ],
  child: MaterialApp()
  )

 

3. 불러오기 (프로젝트에 맞는 불러오기를 사용하면 됨)

 

Consumer 와 context.read

 

Consumer: https://pub.dev/documentation/provider/latest/provider/Consumer-class.html

context.read: 

read: 해당 위젯은 상태값을 읽기.

watch: 해당 위젯이 상태값의 변경을 감시.

select: 해당 위젯은 상태값의 특정 부분만을 감시.