[Flutter] Provider 아키텍처 라이브러리에 대한 이해

개요

Provider는 플러터 전역 상태 관리를 위한 아키텍처 라이브러리 중 하나입니다.

• 플러터 생태계에서 아키텍처를 라이브러리 형태로 만들어 사용하는 게 일반적
• Provider는 인기있는 아키텍처 라이브러리 중 하나로, ChangeNotifier ChangeNotifierProvider Consumer 세 가지 개념을 사용

 

ChangeNotifier

상태 변화에 대한 알림을 제공하는 클래스

• 특정 클래스가 ChangeNotifier 클래스이면 NotifyListener를 통해 외부에서 특정 클래스의 상태 변화에 대해 인지
• 이를 활용해서 유닛 테스팅 또한 쉽게 가능

class CartModel extends ChangeNotifier {

  List<Item> _items = [];

  void add(Item item) {
    _items.add(item);
    
    // 외부의 리스너들에게 상태 변화를 알려준다
    notifyListeners();
  }

  void removeAll() {
    _items.clear();
    
    // 외부의 리스너들에게 상태 변화를 알려준다
    notifyListeners();
  }
}

 

ChangeNotifierProvider

자식들에게 ChangeNotifier를 전달하는 위젯입니다. 한번에 여러 ChangeNotifer를 전달해야 하는 경우 (대부분 그럴 겁니다.) 아래와 같이 MultiProvider를 사용하면 됩니다.

void main() {
  runApp(
  // 이렇게 MultiProvider 위젯으로 ChangeNotifierProvider와 Provider ChangeNotifier를 전달
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CartModel()),
        Provider(create: (context) => SomeOtherClass()),
      ],
      child: const MyApp(),
    ),
  );
}

 

Consumer

내용물이 변경되는 위젯이 Consumer, 소비자입니다.

return HumongousWidget(
  // ...
  child: AnotherMonstrousWidget(
    // ...
    // 중요한 점은, 변경되는 내용물과 가장 가까운 부모가 Consumer임을 알려주는 것
    child: Consumer<CartModel>(
      builder: (context, cart, child) {
        return Text('Total price: ${cart.totalPrice}');
      },
    ),
  ),
);

 

참고 자료

Flutter 인기 아키텍처 라이브러리 3종 비교 분석 - GetX vs BLoC vs Provider

Simple app state management