RiverPod basic 1 add & sub 더하기 빼기

 

설치는 아래 처럼 flutter_riverpod 를 한다. 

이유는 ConsumerWidget 해보면 위에것은 현재 참조가 없다.  앞으로 생길 수도 있으나 .

그래서 , 현재는 아래의 리버팟을 설치한다. 

https://pub.dev/packages/flutter_riverpod

 

riverpod 는 사용할 클래스를 감싸줘야 한다.

// riverpod 는 사용할 클래스를 감까줘야 한다.
runApp(const ProviderScope(child: MyApp()));
//

 

테스트용 카운터 상태 증가 감소를 설정, super의 디폴드 값은 0이다. 

class Counter extends StateNotifier<int> {
  Counter() : super(0);
  void increase() => state++;
  void decrease() => state--;
}

 

불러오는 방법은 몇가지 된다. 직접 감싸서 설정하거나, 뷸더를 사용할 수도 있다. 

사용방법에 따라 달라질 것같다. 

 

Scaffold 이전까지 코드

nameProvider에 title로 쓸 String을 저장했다. 

counterProvider 는 Counter()를 참조해서 상태를 설정한다.

class RiverAddEx extends ConsumerWidget {
  RiverAddEx({super.key});
  final nameProvider = Provider<String>((ref) => 'RiverPodBasic');
  final counterProvider = StateNotifierProvider((ref) => Counter());
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    final namep = ref.watch(nameProvider);
    ref.listen(counterProvider, ((previous, next) => print('state: $previous, $next')));
    return Scaffold(

 

final 설정값으로 namp를 사용하거나 . 직접 ref.watch or read 로 직접 사용 할 수 있다. 

Text('title :${namep}'),
Text('Count Num = ${ref.watch(counterProvider).toString()}'),

 

증가 감소에 사용할 버튼들

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    MaterialButton(
      onPressed: () => ref.read(counterProvider.notifier).decrease(),
      child: Text('<< - Decrease'),
      color: Colors.brown,
    ),
    MaterialButton(
      onPressed: () => ref.read(counterProvider.notifier).increase(),
      child: Text('Increase + >>'),
      color: Colors.brown,
    ),

 

 

전체 코드 

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



class Counter extends StateNotifier<int> {
  Counter() : super(0);
  void increase() => state++;
  void decrease() => state--;
}

class RiverAddEx extends ConsumerWidget {
  RiverAddEx({super.key});
  final nameProvider = Provider<String>((ref) => 'RiverPodBasic');
  final counterProvider = StateNotifierProvider((ref) => Counter());
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    final namep = ref.watch(nameProvider);
    ref.listen(counterProvider, ((previous, next) => print('state: $previous, $next')));
    return Scaffold(
      appBar: AppBar(title: Text('riverpod_start')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('title :${namep}'),
            Text('Count Num = ${ref.watch(counterProvider).toString()}'),
            //ref.watch(counterProvider).toString()
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                MaterialButton(
                  onPressed: () => ref.read(counterProvider.notifier).decrease(),
                  child: Text('<< - Decrease'),
                  color: Colors.brown,
                ),
                MaterialButton(
                  onPressed: () => ref.read(counterProvider.notifier).increase(),
                  child: Text('Increase + >>'),
                  color: Colors.brown,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}