플러터 상태관리 riverpod

 

기능	Provider	StateProvider	StateNotifierProvider	FutureProvider	StreamProvider
상태값 읽기	O	O	O	O	O
상태값 쓰기	X	O	O	O	O
자체 메서드	X	X	O	X	X
비동기 처리 (단방향)	X	X	X	O	O
비동기 처리 (양방향)	X	X	X	X	O

 

1. Provider

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


// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.

final helloWorldProvider = Provider<String>((ref) {
  return "Hello World";
});

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.read(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

• ProviderScope : 앱 전체에서 사용하는 상태를 관리하기 위한 컨테이너 역할을 하며, 이를 통해 Provider를 사용할 수 있는 범위를 제한. ProviderScope를 사용함으로써 각 위젯에서 필요한 상태를 별도로 관리하지 않아도 되므로, 코드를 간결하고 유지보수하기 쉽게 만들어줌

read : 한번 읽으면 끝 → 절대 두번 그려질수 없다
watch : 상태가 변경된걸 수신 → 실시간으로 바껴야됨

---

2. StateNotifierProvider

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


class Counter extends StateNotifier<int>{
  Counter(int num) : super(num);

  void increment(){
    state ++;
  }
}

final counterProvider = StateNotifierProvider<Counter, int>((ref) {
  return Counter(0);
});

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

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final int value = ref.watch(counterProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text("$value"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            ref.read(counterProvider.notifier).increment();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

 

---