Riverpod 상태 관리 라이브러리

특징

• 명시적으로 선언되어 컴파일 타임에 에러를 잡을 수 있다.

• UI(View)와 데이터(State)를 완전히 분리하여 유지보수성을 향상한다.

Provider

• 앱 전체에서 Riverpod 상태를 공유하려면 반드시 ProviderScope로 감싸야 한다.

• Riverpod에서 상태(state)를 저장하고 관리하는 기본 단위.

• 이 코드에서 NotifierProvider를 사용하여 상태와 상태를 변경하는 로직을 관리.

코드

1. main.dart
• ProviderScope로 전체 앱을 감쌈.
• 앱의 시작 화면을 HomePage 설정

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

import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

2. home_page.dart
• UI의 첫 화면을 정의하는 페이지.
• 별도 상태 관리 로직이 없이, HomeBody 호출.

import 'package:flutter/material.dart';
import 'package:riverapp/home_body.dart';

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    print("HomePage build...");
    return Scaffold(
      body: HomeBody(),
    );
  }
}

3. home_body.dart
• UI와 상태 관리 로직 연결
💡
countProvider: 창고.
CountVM 클래스: 창고 관리자.
add() 메서드로 창고에 물건을 추가(상태값 증가).
ref.watch: 창고를 지켜보는 감시자.
ref.read: 창고 관리자에게 명령을 내리는 사람.
1. ConsumerWidget 상태가 변경될 때, 상태를 구독한 위젯만 다시 빌드.
2. 상태 구독(ref.watch)
• countProvider에서 현재 상태값(state)을 가져와 변수 count에 저장.
• 상태값은 Riverpod의 상태 관리 로직(home_page_vm.dart)에서 제공됨.
3. 상태 변경(ref.read)
• countProvider.notifier를 통해 CountVM 클래스의 메서드 호출 가능.
• ref.read(countProvider.notifier)는 CountVM 객체를 반환.
• CountVM의 add() 메서드를 호출해 상태를 업데이트.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverapp/home_page_vm.dart';

// 행위, 상태를 가짐
// 증가 누르면 HomeBody만 다시 그려지는 형태
class HomeBody extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print("HomeBody build...");
    int count = ref.watch(countProvider); // 상태를 구독하여 값 얻기
    //int count = ref.read(countProvider); // 상태 변경 로직 접근
    CountVM vm = ref.read(countProvider.notifier); // write

    return Center(
      child: Column(
        children: [
          OutlinedButton(onPressed: (){ // UI 빌드 및 상태 업데이트
            vm.add(); // 버튼 클릭시 add()을 호출해 상태값 증가
          }, child: Text("증가")),
          Text( // ref.watch를 통해 UI가 자동 업데이트(화면에 표시)
            "$count", 
            style: TextStyle(fontSize: 50),
            
          ),
        ],
      ),
    );
  }
}

4. home_page_vm.dart
• 상태와 상태 변경 로직 정의.
• countProvider:
• NotifierProvider를 통해 상태 관리 객체 CountVM 연결.
• CountVM:
• add() 메서드로 상태값 증가

// ViewModel 뷰에서만 사용하는 모델(탐색값)
// 앱은 단일 프로세스 -앱이 내려가면 메모리 사라짐
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 창고 관리자
final countProvider = NotifierProvider<CountVM, int>(() {
  // 바깥 괄호값은 익명함수 -함수를 던김
  print("창고 만듬");
  return CountVM();
});

// 창고
class CountVM extends Notifier<int> {
  @override
  int build() {
    return 20; // return값이 상태값
  }

  // 행위
  void add() {
    state = state + 1;
  }
}

화면