Provider 아키텍쳐 분석

목적

개인 앱 프로젝트를 위해 프로젝트를 어떠한 구조로 가져가야 할지 고민이 많았다.

1. 상태관리의 편리성
2. 사용자가 없음

두가지를 고려 하였을때 Provider를 사용하기로 하였으며, 본격적인 프로젝트 진행을 위해 유튜브 "개발하는남자" 님의 유튜브 영상의 프로젝트를 분석해 보고자 한다.

분석

프로젝트 구조

lib
|   main.dart
|
\---src
    +---component
    |       count_view.dart
    |
    +---provider
    |       counter_provider.dart
    |
    \---ui
            home.dart

main.dart

MultiProvider를 활용하여 Home() ui에 ChangeNotifierProvider 배열을 제공

body: CountView(),

home: MultiProvider(
        providers: [
          ChangeNotifierProvider(
              create: (BuildContext context) => CounterProvider())
        ],
        child: Home(),
      ),

src/ui/home.dart

Provider.of<CounterProvider>.add() 로 provider 사용

CounterProvider countProvider =
        Provider.of<CounterProvider>(context, listen: false);
        
IconButton(
            icon: Icon(Icons.add),
            onPressed: () => countProvider.add(),
          ),

src/provider/counter_provider.dart

ChangeNotifier를 상속받아 _count 상태에 대한 getter, setter, method 제공

class CounterProvider extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  add() {
    _count++;
    notifyListeners();
  }

  subtract() {
    _count--;
    notifyListeners();
  }
}

src/components/count_view.dart

재사용할만한 컴포넌트들을 넣어두신 폴더 같음

Provider.of<CounterProvider>(context).count.toString(),

결론

앞서 진행하였던 Provider 상태관리 글과 대동소이하였다.
다른점이 있다면 Model을 사용하시지 않으셨다는점,
영화앱과는 달리 count는 model이 필요없다는점,
이제는 직접 개인앱 개발을 시작해보자!