Flutter 상태관리 (RiverPod)

RiverPod 

: Provider 의 단점을 제거한 상태관리 plugin

(Provider 를 대체 한다기는 보다는 단점을 보완하고 확장한 확장라이브러리로 보는게 좋다.)

 

flutter pub add flutter_riverpod

flutter pub get

 

counter app 을 riverpod 를 이용해서 다시 작성해 보자

 

counter_riverpod.dart

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

final counterProvider = StateNotifierProvider(
        (ref) => CounterRiverpod(0)
);

class CounterRiverpod extends StateNotifier<int>{
  CounterRiverpod(super.state);

  void increment() => ++state;

  void decrement() => --state;
}

StateNotifier<int> 를 상속하여 CounterRiverpod 를 생성하고 increment 와 decrement 를 구현한다. 

 

생성된 CounterRiverpod (이름은 아무래도 좋다) 를  StateNotifierProvider 와 연결한다. 

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter3/riverpod/counter_page.dart';

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

....

ProviderScope 를 최상위에 올려서 app 을 감싸게 한다. 

 

counter_page.dart

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


class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterPage()
    );
  }
}

class CounterPage extends ConsumerWidget  {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter Bloc')),
      body: Center(
          child: Consumer(
              builder: (context, ref, _) {
                final count = ref.watch(counterProvider).toString();
                return Text(count, style: Theme.of(context).textTheme.headline1);
              }
          )
      ),
      floatingActionButton:  Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => ref.read(counterProvider.notifier).increment(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => ref.read(counterProvider.notifier).decrement(),
          ),
        ],
      ),
    );
  }
}

ConsumerWidget 을 상속받게 하고 WidgetRef ref 를 build 함수의 parameter 에 추가한다. 

buid(... , WidgetRef ref) 

 

Text 에 counter 를 표시하기 위해 Consumer 를 이용한다. 

ref.watch 를 통해 count 를 받아온다. 

button 의 onPressed 에서 동작을 정의한다. 

ref.read 를 통해 increment 와 decrement 를 호출한다. 

 

관련영상

https://youtu.be/r80CbRSECBk