RiverPod 소개와 이론이란!

🦥 RiverPod 소개와 이론

상황

상태는 데이터를 관리하는 것이며, stful setState 만 사용해서 관리할수 있다. setState 만으로는 부족할 때가 있다. 스크린과 다른 스크린에 데이터를 넘겨줄때 어려움이 있을 수 있다.

RiverPod 란?

상태관리 중 하나이다.

패키지 설치

riverpod 은 native riverpod 이고, flutter_riverpod 은 flutter 에서 native 하게 쓸수 있게 도와주는 것 hooks 라는 다른라이브러리를 sync 가 잘 되게 패키지 https://pub.dev/packages/riverpod

사용법

main.dart

void main() {
	runApp(
    	//  RiverPod을 사용하기 위해서 ProviderScope 로 위젯이 있어야 한다.
    	ProviderScope(
        	child: MeterialApp(
            	home: HomeScreen(),
            )
        )
    )
}

import 'package:패키지 이름/flutter_riverpod.dart';

final numberProvider = StateProvider<int>((ref) => 0);

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_study/layout/default_layout.dart';
import 'package:riverpod_study/reverpod/state_provider_screen.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 특정 provider 를 바라 보고있다가 변경이 되는것을 감지한다.

    final provider = ref.watch(numberProvider);
    return DefaultLayout(
        title: 'StateProviderScreen',
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(provider.toString()),
              ElevatedButton(
                onPressed: () {
                  ref
                      .read(numberProvider.notifier)
                      .update((state) => state + 1);
                },
                child: Text('UP'),
              ),
              ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (_) => _NextScreen(),
                      ),
                    );
                  },
                  child: Text('NextScreen'))
            ],
          ),
        ));
  }
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final provider = ref.watch(numberProvider);

    return DefaultLayout(
        title: 'StateProviderScreen',
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(provider.toString()),
              ElevatedButton(
                onPressed: () {
                  ref
                      .read(numberProvider.notifier)
                      .update((state) => state + 1);
                },
                child: Text('UP'),
              )
            ],
          ),
        ));
  }
}

결과