Flutter Riverpod 예제로 설명

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

// 1. Provider 정의
// StateProvider는 간단한 상태를 관리하는 데 사용
// 여기서는 카운터 상태를 관리
final counterProvider = StateProvider((ref) => 0);

void main() {
  runApp(
    // 2. ProviderScope 추가
    // ProviderScope는 앱 전체에서 Riverpod을 사용할 수 있게 해줌
    ProviderScope(
      child: MyApp(),
    ),
  );
}

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

// 3. ConsumerWidget 사용
// ConsumerWidget은 Provider의 상태 변화를 감지하고 UI를 자동으로 업데이트
class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 4. Provider 상태 읽기
    // ref.watch()를 사용하여 counterProvider의 현재 상태를 읽음
    // 이 값이 변경될 때마다 build 메서드가 다시 호출
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Example')),
      body: Center(
        child: Text('Count: $count', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        // 5. Provider 상태 업데이트
        // ref.read()를 사용하여 Provider의 상태를 변경
        // .notifier는 StateProvider의 컨트롤러에 접근
        // .state++는 현재 상태를 +1 해줌, 간단히 버튼 누를 때 마다 하나씩 증가
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}