[Flutter] 11. Riverpod

김주희

Jun 08, 2025

Riverpod 라이브러리 연결

관리할 scope 설정

최상단인 MyApp을 ProviderScope한테 던져주면 관리해야 될 모든 위젯의 트리를 다 알 수 있도록 설정한다. 내가 관리해야 할 scope를 알기 위해 하는 설정이다. 보통 전체 위젯 트리를 다 관리해야한다.

17:07~

HomePage(+HeaderPage, BottomPage) 분리

home_vm 파일 생성

vm은 viewmodel의 약어

homepage의 상태 관리할 파일

페이지 별로 만들면 된다(홈페이지 안에 헤더,바텀있는데 그것도 만들어야되나요?ㄴ)

창고 만들기 전에 Flutter Riverpod Snippets 설치

창고

창고에서 관리되는 데이터 타입은 하나임

필드 여러개면 하나의 클래스 타입으로 감싸서 써야됨

창고 이름, 창고가 관리하는 데이터 타입 순서임

창고에 오류 뜨는데 Notifier를 상속받은 창고여야 한다.

User 클래스를 관리한다면

창고 만들어질때 build가 실행되면서 초기화된다.

build 함수 안에 통신코드가 들어있고 return 하면 창고 초기화 못함 통신 끝날때까지 기다렸다가 초기화하면 화면 ux가 안좋아짐

→ riverpod이 좋은 이유

일단 통신 끝나기 전이니까 null을 넣고 통신은 비동기로 돌린다.

상태가 갱신되면 watch하고 있으면 구독자들이 알림을 받고 그림을 다시그린다.

기본세팅


import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 데이터 타입 (int이면 안 만들어도 됨) - dto와 똑같이 생긴

// 2. 창고
class HomeVM extends Notifier<int> {
  // 창고가 만들어질때 초기화 메서드 (return 하는 값을 창고가 state로 관리함)
  @override
  int build() {
    return 1;
  }
}

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