지난 글에서 InheritedWidget으로 값을 트리 아래로 내려보내는 법을 봤다. 읽는 쪽은 편해졌지만 값을 바꾸는 건 여전히 위쪽 State의 setState에 기대야 했다. 이번엔 값과 그 값을 바꾸는 함수를 한 클래스에 묶어서 필요한 위젯 어디서든 쓰게 해보자. 먼저 그냥 평범한 클래스로 시도해본다.

class CounterModel {
  int count = 0;

  void increment() {
    count++;
  }
}

이 객체를 트리에 걸어두고 화면에서 쓰는 코드는 이렇다. Provider 패키지를 쓰므로 먼저 설치한다.

flutter pub add provider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    Provider(
      create: (_) => CounterModel(), // 객체를 트리에 걸어둠
      child: const MyApp(),
    ),
  );
}

class CountText extends StatelessWidget {
  const CountText({super.key});

  @override
  Widget build(BuildContext context) {
    final count = context.watch<CounterModel>().count;
    return Text('$count');
  }
}

class PlusButton extends StatelessWidget {
  const PlusButton({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => context.read<CounterModel>().increment(),
      child: const Text('+1'),
    );
  }
}

버튼을 눌러도 숫자는 계속 0이다. increment() 안에 print(count)를 넣어보면 콘솔에는 1, 2, 3이 올라간다. 값은 분명히 바뀌는데 화면이 그대로인, setState 글에서 겪은 증상과 똑같다.

원인: 값이 바뀌었다고 아무도 알려주지 않는다

CounterModel은 평범한 클래스라서 count++가 일어나도 "바뀌었다"는 신호가 어디로도 가지 않는다. CountText는 처음 한 번 값을 읽고 끝이다. 화면을 다시 그리려면 값을 가진 쪽이 구독자에게 알려주는 장치가 있어야 한다.

해결: ChangeNotifier로 바뀌었다고 알리기

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 구독자에게 바뀌었다고 알림
  }
}

그리고 걸어두는 쪽을 ChangeNotifierProvider로 바꾼다.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterModel(),
      child: const MyApp(),
    ),
  );
}

이제 버튼을 누르면 숫자가 올라간다. 바뀐 건 두 가지다.

• extends ChangeNotifier로 "구독을 받을 수 있는 객체"가 됐다
• 값을 바꾼 뒤 notifyListeners()를 불러서, 이 값을 watch로 읽은 위젯들을 다시 그리게 한다

notifyListeners()를 빼먹으면 처음 증상으로 돌아간다. setState를 빼먹는 실수와 같은 자리다.

그리고 필드를 _count로 숨기고 get count만 열어둔 이유가 있다. count를 그냥 공개해두면 밖에서 model.count = 5처럼 바꿔버릴 수 있는데, 이렇게 바꾸면 notifyListeners()가 불리지 않아서 화면이 안 바뀐다. 값은 모델 안의 메서드로만 바꾸게 막아두는 게 안전하다.

CountText와 PlusButton이 둘 다 StatelessWidget인 점도 눈여겨보자. 값을 setState로 들고 있는 위젯이 없고, 트리 어디에 놓든 같은 CounterModel을 쓴다. 지난 글의 InheritedWidget을 직접 만들지 않아도 된다.

watch와 read의 차이

final count = context.watch<CounterModel>().count; // build 안에서
onPressed: () => context.read<CounterModel>().increment(), // 버튼 콜백 안에서

• context.watch<T>(): 값을 읽으면서 구독한다. 값이 바뀌면 이 위젯이 다시 build된다. build 안에서 쓴다.
• context.read<T>(): 값을 한 번만 읽고 구독하지 않는다. onPressed 같은 이벤트 처리 안에서 쓴다.

지난 글의 dependOnInheritedWidgetOfExactType(구독)과 getInheritedWidgetOfExactType(한 번만)에 그대로 대응한다. 둘을 바꿔 쓰면 문제가 생긴다.

버튼 콜백 안에서 context.watch를 쓰면 에러가 난다. 콜백은 build 중이 아니라서 구독할 수 없기 때문이다. 거꾸로 build 안에서 context.read로 값을 읽으면 에러는 안 나지만, 값이 바뀌어도 화면이 갱신되지 않는다. 화면에 보여줄 값은 watch, 동작을 시킬 땐 read로 기억하면 된다.

삽질 포인트: Provider를 걸어둔 build에서 바로 읽으면 못 찾는다

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CounterModel(),
      child: Text('${context.watch<CounterModel>().count}'), // 여기서 에러남
    );
  }
}

ProviderNotFoundException이 난다. 이 build의 context는 ChangeNotifierProvider보다 위에 있어서, 위로 올라가도 CounterModel을 못 찾는다. 지난 글의 CountScope.of(context) 에러와 같은 이유다. Provider가 InheritedWidget을 감싼 것이니 당연하다.

읽는 쪽을 별도 위젯으로 빼거나, Consumer로 새 context를 얻는다.

ChangeNotifierProvider(
  create: (_) => CounterModel(),
  child: Consumer<CounterModel>(
    builder: (context, model, child) => Text('${model.count}'),
  ),
)

Consumer의 builder가 받는 context는 Provider 아래의 위치라서 위로 올라가면 찾는다. 위젯을 새로 만들기 번거로울 때 편하다.

여러 모델을 걸어두기: MultiProvider

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterModel()),
        ChangeNotifierProvider(create: (_) => ThemeModel()),
      ],
      child: const MyApp(),
    ),
  );
}

Provider를 중첩하면 들여쓰기가 깊어지므로 MultiProvider로 한 줄에 나열한다. 모델은 보통 앱 맨 위(runApp 근처)에 걸어서 어느 화면에서든 쓸 수 있게 한다.

화면 일부만 다시 그리기: select

context.watch<CounterModel>()은 모델의 무엇이든 바뀌면 다시 그린다. 모델에 필드가 여러 개일 때 하나만 필요하면 select로 좁힌다.

final count = context.select<CounterModel, int>((m) => m.count);

count가 바뀔 때만 이 위젯이 다시 build된다. 처음에는 watch로 시작하고, 불필요하게 자주 그려진다고 느낄 때 select를 쓰면 된다.

Compose, SwiftUI와 비교하면

// Compose - ViewModel + StateFlow
class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count = _count.asStateFlow()
    fun increment() { _count.value++ }
}

@Composable
fun CountText(vm: CounterViewModel = viewModel()) {
    val count by vm.count.collectAsState()
    Text("$count")
}

// SwiftUI - ObservableObject
class CounterModel: ObservableObject {
    @Published var count = 0
    func increment() { count += 1 }
}

struct CountText: View {
    @EnvironmentObject var model: CounterModel
    var body: some View { Text("\(model.count)") }
}

• 값을 가진 객체: Flutter ChangeNotifier / Compose ViewModel / SwiftUI ObservableObject
• 바뀐 걸 알리는 방법: Flutter는 notifyListeners()를 직접 호출 / Compose StateFlow의 값 변경 / SwiftUI @Published가 자동으로
• 트리에 걸어두기: Flutter ChangeNotifierProvider / Compose viewModel()로 가져옴 / SwiftUI .environmentObject
• 읽고 구독하기: Flutter context.watch / Compose collectAsState / SwiftUI @EnvironmentObject

SwiftUI의 ObservableObject와 구조가 가장 비슷하다. 다만 SwiftUI는 @Published가 알림을 자동으로 보내는 반면, Flutter는 notifyListeners()를 직접 불러야 한다. 이 호출을 빼먹는 게 Flutter에서 가장 흔한 실수다.

정리

• 평범한 클래스는 값이 바뀌어도 알려주지 않아서 화면이 갱신되지 않는다
• ChangeNotifier를 상속하고 값을 바꾼 뒤 notifyListeners()를 호출하면, 그 값을 구독한 위젯들이 다시 그려진다
• 화면에 보여줄 값은 build 안에서 context.watch, 버튼 같은 동작은 콜백 안에서 context.read를 쓴다
• Provider를 걸어둔 build에서 바로 읽으면 ProviderNotFoundException이 나므로, 읽는 쪽을 별도 위젯이나 Consumer로 분리한다
• 여러 모델은 MultiProvider로 앱 맨 위에 걸고, 일부만 구독하려면 select를 쓴다
• Provider는 InheritedWidget을 감싼 패키지라서, 지난 글의 원리가 그대로 들어 있다

다음 글에서는 Provider의 한계와, 이를 보완한 Riverpod을 다뤄보겠다.