Flutter Provider 패턴으로 상태 관리 구조 개선

문제 상황

회사 앱의 장바구니 기능을 작업하면서 setState만으로는 한계를 느꼈다. 상품 리스트, 장바구니 아이콘 뱃지, 결제 화면이 모두 같은 상태를 공유해야 했는데, 위젯 트리 깊숙한 곳까지 콜백을 전달하는 구조가 비효율적이었다.

Provider 도입

Flutter 팀이 권장하는 Provider 패키지(v3.0)를 도입했다. 기존 InheritedWidget을 감싸 사용하기 쉽게 만든 라이브러리다.

class CartModel extends ChangeNotifier {
  final List<Product> _items = [];
  
  List<Product> get items => _items;
  
  int get totalPrice => _items.fold(0, (sum, item) => sum + item.price);
  
  void add(Product product) {
    _items.add(product);
    notifyListeners();
  }
  
  void remove(String id) {
    _items.removeWhere((item) => item.id == id);
    notifyListeners();
  }
}

최상위에서 ChangeNotifierProvider로 감싸고, 필요한 곳에서 Consumer나 Provider.of로 접근했다.

ChangeNotifierProvider(
  create: (_) => CartModel(),
  child: MyApp(),
);

// 사용처
Consumer<CartModel>(
  builder: (context, cart, child) {
    return Text('${cart.items.length}');
  },
)

결과

콜백 지옥에서 벗어났고, 상태 변경 시 필요한 위젯만 rebuild되어 성능도 개선됐다. BLoC 패턴도 고려했지만, 현재 앱 규모에서는 Provider로 충분하다고 판단했다. 러닝커브도 낮아서 팀원들이 빠르게 적응했다.