[Flutter] 플러터 - RiverPod 상태관리(1) Provider 사용해 보기

flutter_riverpod

---

Provider, StateProvider, StateNotifierProvider 사용 예시로 이루어진 시리즈입니다.

이번 시간엔 Provider를 사용해 볼게요!

https://pub.dev/packages/flutter_riverpod

flutter_riverpod | Flutter Package

pubspec.yaml

  flutter_riverpod: ^2.1.3

 

---

1. 최상단에 ProviderScope 감싸주기 

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

 

2. 전역적으로 가져올 문자열이 필요할 경우 가장 가벼운 예시를 여기서 진행 

-  하나의 다트 파일에 아래 코드 입력 "Hello RiverPod" 을 가져올 거임 

final helloWorldProvider = Provider((_) => "Hello world");

3. 기존 "StatefulWidget" 위젯을 ConsumerStatefulWidget으로 변경,

* StatelessWidget위젯은 ConsumerWidget으로 선언하고빌드 메소드 매개변수에 WidgetRef ref 를 추가해줘야만 ref 접근 가능

아래 "State"가 있는 @override, extends부분에도 접두사로 "Consumer" 붙혀주기 

-> 이제부터 @override된 빌드 메서드 안에서 "ref" 변수에 접근 가능

 

3.1   "ref.watch( 2번에서 만들어준 관리하고자 하는 레퍼런스)로 값 관찰하기 

* 우리가 만든 helloWorldProvider는 단순히 값을 생성하는 Provider입니다. 상태를 갖는 StateProvider나 StateNotifierProvider와는 달리, Provider는 변경 가능한 상태를 갖지 않습니다. Provider는 한 번 값이 생성되면 그 값을 계속 반환합니다. 이러한 특성 때문에 Provider는 상태를 관리하지 않고, 그저 값을 생성하거나 제공하는 데 사용됩니다. -> 즉 읽기만 가능하다는 뜻..

특수한 FutureProvider와 StreamProvider를 제외하고 StateProvider, StateNotifierProvider, ChangeNotifierProvider에 대한 Use Case에 state object라는 설명이 있지만, Provider는 state라는 설명이 없습니다. 그저 computed property(filtered list) 라고만 되어 있습니다. Provider가 반환하는 상태는 getter 프로퍼티와 마찬가지로 상태를 변경할 수 없고 읽기만 가능합니다.

ref.watch(helloWorldProvider) == "Hello RiverPod" # true

# ref.watch 메소드는 상태변경을 감지하고 있다가 변경되면 화면을 재빌드 해줍니다. 
# read는 일회성으로 읽기만 함

 

final helloWorldProvider = Provider((_) => "Hello world");

class MainPage extends ConsumerStatefulWidget {
  const MainPage({super.key} );

  @override
  ConsumerState<MainPage> createState() => _MainPageState();
}

class _MainPageState extends ConsumerState<MainPage> {

  @override
  Widget build(BuildContext context) {
    final String value = ref.watch(helloWorldProvider);

    return  Scaffold(
      appBar: AppBar(
        title: Text(value), // 상태관리로 가져온 value 
      ),
      body: const RiverView(),
    );
  }
}

상태관리 값 읽어오기 끝! 이제 저 값들을 변경할 수 있으면 되겠죠 ~? 일반적인 Provider은 값을 읽을 순 있으나 수정은 안됩니다 ㅎㅎ

상태관리 메소드 read, watch, listen에 대하여 아래 포스팅의 게시하겠습니다.