[Flutter #9] Riverpod

Sep 27, 2025

Contents

1. read vs watch 2. Riverpod 세팅 3. 창고 만들기 (State + 행위)4. UI에서 창고 사용하기 5. Riverpod 동작 흐름 6. 핵심 포인트 한눈에 7. 왜 Riverpod을 쓰는가?

Flutter에서 상태 관리는 앱의 핵심입니다.

setState()만으로는 화면이 복잡해질수록 유지·보수가 어려워지기 때문에,

더 안전하고 모듈화된 상태 관리 도구가 필요합니다.

그중 Riverpod은 Provider 패턴을 개선한 강력한 상태관리 라이브러리입니다.

1. read vs watch

Riverpod의 핵심은 Provider(창고)와 ref(열쇠)입니다.

ref를 통해 Provider에 접근할 때 두 가지 방식이 있습니다.

watch

→ 상태를 “구독”해서 값이 바뀌면 자동으로 UI를 다시 빌드

→ 주로 UI(화면)에서 사용

read

→ 상태를 “한 번만 읽기”

→ 주로 행위(메서드 호출)가 필요할 때 사용 (UI 갱신 없이 단발성 접근)

ㅤ	watch	read
목적	상태 구독 & 자동 리빌드	상태/Notifier에 단발성 접근
사용 위치	build(), ConsumerWidget	onPressed, initState, 비즈니스 로직

2. Riverpod 세팅

pubspec.yaml에 추가


flutter_riverpod: ^2.6.1

main.dart에서 앱 최상단을 ProviderScope로 감싼다.


void main() {
  runApp(const ProviderScope(child: MyApp()));
}

3. 창고 만들기 (State + 행위)

Riverpod에서 창고 = ViewModel/Notifier 라고 보면 됩니다.

(1) 상태 타입이 단순할 때

단순히 int, bool 정도라면 굳이 클래스를 만들지 않고 StateProvider로 바로 관리할 수 있습니다.


final counterProvider = StateProvider<int>((ref) => 0);

(2) 상태 + 행위가 있는 경우 (ViewModel)

상태 값과 행위를 같이 관리하고 싶을 때 Notifier를 상속받습니다.


// 창고(ViewModel)
class HomeVM extends Notifier<int> {
  @override
  int build() {
    return 1; // 초기 상태값
  }

  void increase() {
    state++; // setState 필요 없음
  }
}

// 창고 관리자(Provider)
final homeProvider = NotifierProvider<HomeVM, int>(() {
  return HomeVM();
});

📌 정리

Notifier<int> : 창고가 관리할 상태(State)의 타입 = int

build() : 창고가 생성될 때 초기값 설정

state : 현재 상태값. 수정하면 자동으로 구독 중인 UI가 리빌드

4. UI에서 창고 사용하기

1) watch – 상태 구독

ConsumerWidget 또는 Consumer를 사용해 watch로 상태를 구독합니다.

상태가 바뀌면 자동으로 빌드가 다시 일어납니다.


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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(homeProvider); // 상태 구독
    return Scaffold(
      body: Center(
        child: Text('$count', style: const TextStyle(fontSize: 50)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 행위 호출은 read
          ref.read(homeProvider.notifier).increase();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

ref.watch(homeProvider) → 상태값 구독

ref.read(homeProvider.notifier) → 행위(메서드) 호출

2) read – 단발성 접근

build가 아닌 이벤트 핸들러, initState 등에서 read를 사용하면

값이 바뀌어도 UI가 다시 그려지지 않습니다.

5. Riverpod 동작 흐름


Build(화면)
   ↓ watch(ref.watch)
Provider(관리자)
   ↓
Notifier(ViewModel, 창고)
   ↓
State(값)

Build(화면)가 watch로 Provider에 구독 신청

Provider는 Notifier(창고)를 통해 State를 관리

State가 바뀌면 구독 중인 화면만 자동 리빌드

6. 핵심 포인트 한눈에

watch : 상태값 구독 (UI 리빌드 O)

read : 단발성 접근 (UI 리빌드 X)

Notifier : 상태 + 행위(ViewModel) 정의

NotifierProvider : Notifier를 관리하는 Provider

ProviderScope : 앱 전체 Provider 관리

7. 왜 Riverpod을 쓰는가?

setState()보다 안전하고 전역적으로 상태를 공유할 수 있다.

BuildContext와 독립적 → 어디서든 Provider 접근 가능

더 나은 테스트, 모듈화, 유지보수

Contents

1. read vs watch 2. Riverpod 세팅 3. 창고 만들기 (State + 행위)4. UI에서 창고 사용하기 5. Riverpod 동작 흐름 6. 핵심 포인트 한눈에 7. 왜 Riverpod을 쓰는가?

// 창고(ViewModel) class HomeVM extends Notifier<int> { @override int build() { return 1; // 초기 상태값 } void increase() { state++; // setState 필요 없음 } } // 창고 관리자(Provider) final homeProvider = NotifierProvider<HomeVM, int>(() { return HomeVM(); });

class HomePage extends ConsumerWidget { const HomePage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final count = ref.watch(homeProvider); // 상태 구독 return Scaffold( body: Center( child: Text('$count', style: const TextStyle(fontSize: 50)), ), floatingActionButton: FloatingActionButton( onPressed: () { // 행위 호출은 read ref.read(homeProvider.notifier).increase(); }, child: const Icon(Icons.add), ), ); } }