[Flutter] RiverPod 입문 #1 - 여러 화면에서 Count 세기

1) 개요

플러터를 입문한 지 어느덧 3년 차가 되어간다.

그동안 상태관리툴로써 Provider를 가장 많이 사용해 왔었지만 언젠가는 Deprecated 된다는 Provider의 창시자의 말에 충격을 받게 되었다. 다른 상태관리툴을 익혀야 될 때가 된 것 같아 알아보던 도중 GetX와 BLoC에 눈을 들이게 되었는데

GetX의 경우엔 10개월째 패키지 업데이트가 이뤄지지 않고 있고 BLoC패턴의 경우는 간단한 프로젝에 어울리지 않으며 난이도가 어렵기 때문에 마지막으로 Provider의 계승자인 RiverPod을 알게 되었다.

 

RiverPod 은 Provider의 철자에서 순서만 바뀐 단어이며

Provider에서 컴파일러 중에 발생하는 오류, 여러 문제점들을 최대한 개선하여 RiverPod으로 배포가 되었었다.

 

우선 패키지부터 설정하도록 하자

 

 

 

 

2) 설치

직접 pub.dev 에서 버전을 지정하여 pubspec.yaml에 추가하는 방식을 사용하거나

https://pub.dev/packages/riverpod

riverpod | Dart Package

 

아래의 명령어로 간단하게 추가하도록 하자.

flutter pub add flutter_riverpod

 

 

 

 

3) 코드작성

 

우선  우리는 1번 화면에서 FAB버튼을 클릭하면 숫가 올라가고 2번 화면에서도 1번 화면에서 봤던 숫자를 똑같이 올릴 수 있도록 하는 앱을 만들도록 할 것이다.

 

riverpod 사용을 하기 위해서 먼저 main.dart 파일의 runApp부분을 다음과 같이 수정해줘야 한다.

 

main.dart

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

 

 

count_state.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';

final countState = StateNotifierProvider<CountNotifier, int>((ref) => CountNotifier());

class CountNotifier extends StateNotifier<int> {
  CountNotifier() : super(0);

  void increment() => state++;
}

 

위의 코드처럼 count_state.dart 파일을 만든 후 내부에 코드를 작성하도록 한다.

 

여기서 final countState 변수는 StateNotifierProvider의 객체로  App 수준의 전역 변수로 사용될 수 있다.

해당 객체에는 StateNotifier로부터 상속받은 CountNotifier 객체와 int 객체를 (다른 클래스파일, 예를 들어 User모델 클래스를 사용할 수 있다) 담게 된다. 이렇게 한 객체가 무리를 이루는 모습을 하여서 RiverPod이라는 단어가 완성된 게 아닐까 라는 뇌피셜을 남겨본다.

 

CountNotifier 클래스 내부에는 생성자를 0으로 초기화하는 기능과 increment() 메소드를 통해 int변수를 ++ 해주는 역할을 수행하고 있다.

 

다음은 첫 번째 화면으로 보여줄 코드를 남기도록 하겠다.

 

first_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_test/screens/second_screen.dart';
import 'package:riverpod_test/states/counte_state.dart';

class  FirstScreen extends ConsumerStatefulWidget{
  @override
  _FirstScreenState createState() => _FirstScreenState();

}

class _FirstScreenState extends ConsumerState<FirstScreen> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    final int count = ref.watch(countState);
    print('onBuild');

    return Scaffold(
      appBar: AppBar(
        title: Text('FirstScreen'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _onPressedFAB,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              count.toString(),
              style: TextStyle(fontSize: 32),
            ),
            ElevatedButton(onPressed:_onPressedGoToSecondButton, child: Text('Go to Second'))
          ],
        ),
      ),
    );
  }

  void _onPressedFAB() {
    final CountNotifier counteNotifier = ref.read(countState.notifier);
    counteNotifier.increment();
  }

  void _onPressedGoToSecondButton(){
    Navigator.push(context,MaterialPageRoute(builder: (context)=>SecondScreen()));
  }
}

 

여기서 첫 번째로 보이는 차이점은 

StatefulWidget클래스의 상속 부분이다.

기존에는 FirstScreen을 StatefulWidget으로 선언할 땐 

class FirstScreen extends StatefulWidget{
 	@override
	_FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
	@override
    Widget build(BuildContext context){
    	return ...
    }
}

이런 모습으로 선언하였다.

하지만 RiverPod은 별도로 상태관리 부모클래스로 ConsumerStatefulWidget을 가지고 있으며

StatefulWidget과는 큰 차이가 없다.

만약 RiverPod으로 StatefulWidget을 생성할 경우 아래의 모습으로 시작하게 될 것이다.

class FirstScreen extends ConsumerStatefulWidget {
    @override
    _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends ConsumerState<FirstScreen> {
	@override
    Widget build(BuildContext context){
    	return ...
    }
}

 

그다음으로 봐야 할 부분은 build메소드 부분이다.

기존에 StatefulWidget에서의 build 메소드는 보통 BuildContext만 사용했다.

근데 RiverPod의 StatefulWidget은 WidgetRef를 사용하고 있는 걸 보고 있다.

우린 WidgetRef를 통해 Provider를 호출하고 UI갱신을 하고 상태를 관리할 수 있게 된다.

final int count = ref.watch(countState);

ref에서의 watch를 통해 이전에 우리가 생성해 둔 countState에서 int변수를 가져올 수가 있게 된다.

 

final CountNotifier counteNotifier = ref.read(countState.notifier);
counteNotifier.increment();

그리고 ref에서의 read를 통해 countState의 Notifier객체를 가져올 수 있게 되고 이를 통해 값을 컨트롤할 수가 있게 된다.

만약 Notifier를 통해 데이터를 수정하게 된다면 UI가 자동으로 rebuild 가 되게 된다.

 

 

다음은 두 번째 화면에서 숫자를 변경하기 위해 새로운 두 번째 화면 파일을 생성하도록 하겠다.

 

second_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_test/states/counte_state.dart';

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

  @override
  Widget build(BuildContext context,WidgetRef ref) {
    final CountNotifier countNotifier = ref.read(countState.notifier);
    final int count = ref.watch(countState);

    return Scaffold(
        appBar: AppBar(
          title: Text('SecondScreen'),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            countNotifier.increment();
          },
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                count.toString(),
                style: TextStyle(fontSize: 32),
              ),
            ],
          ),
        ));
  }
}

이번엔 SecondScreen의 부모클래스는 CunsumerWidget인데 StatelessWidget와 같은 역할을 수행하며 ref를 제공하기도 한다.

 

여기서도 마찬가지로 ref.watch()를 통해 데이터를 가져오도록 하고

ref.read()를 통해 데이터를 다루는 모습을 볼 수 있다.

 

여기까지 RiverPod의 아주 기본적인 상태관리에 대해 알아보았고, 다음엔 조금 더 다양한 기술을 다뤄보도록 할 것이다.