Provider: watch 또는 read

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 11번째.

Provider에서 모델을 가져오는 방법은 두 가지이며, 각각 다른 역할을 합니다.

context.watch<StepCounter>()는 모델을 가져오고 구독도 합니다: 모델이 notifyListeners()를 호출하면 이 위젯이 다시 빌드됩니다. 화면에 표시할 내용에는 build에서 사용하세요.

context.read<StepCounter>()는 구독하지 않고 모델을 한 번 가져옵니다. 메서드를 호출하고 아무것도 표시하지 않으려는 onPressed와 같은 콜백에서 사용하세요:

Widget build(BuildContext context) {
  final steps = context.watch<StepCounter>().steps;   // 표시함
  return ElevatedButton(
    onPressed: () => context.read<StepCounter>().walk(),   // 동작함
    child: Text('$steps steps'),
  );
}

둘을 혼동하면 그 결과를 바로 알 수 있습니다. build에서 read를 사용하면 처음 값만 계속 표시됩니다. onPressed 안에서 watch를 사용하면 오류가 발생합니다. 탭 동작은 빌드가 아니며 구독할 대상도 없기 때문입니다.

챌린지

쉬움

Walk를 누르면 모델에 1000걸음이 추가되지만, 화면에는 계속 0 steps가 표시됩니다.

걸음 수 줄이 모델을 따라가도록 하여 탭할 때마다 새 숫자가 표시되게 하세요.
버튼 호출은 그대로 유지하세요.

직접 해보기

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

class StepCounter extends ChangeNotifier {
  int _steps = 0;

  int get steps => _steps;

  void walk() {
    _steps += 1000;
    notifyListeners();
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final steps = context.read<StepCounter>().steps;
    return Scaffold(
      appBar: AppBar(title: const Text('Steps')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$steps steps', style: const TextStyle(fontSize: 40)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                context.read<StepCounter>().walk();
              },
              child: const Text('Walk'),
            ),
          ],
        ),
      ),
    );
  }
}