Riverpod는 기존의 provider 를 개선해서 나온 업그레이드 버전이다. 

정식 패키지는 

https://riverpod.dev/ko/

 

Riverpod

안전하게 Provider 읽기 Provider를 읽는 중 더 이상 bad state가 되지 않습니다. 만약 Provider를 읽기 위한 필요한 코드를 작성하면, 당신은 유효한 값을 얻을 수 있습니다. Provider는 비동기적으로 로드된

riverpod.dev

자세한 설명은

https://velog.io/@yeahsilver/Flutter-Riverpod-Riverpod%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-Riverpod%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

Flutter: Riverpod - Riverpod란 무엇인가?, Riverpod을 사용하는 방법

: 경랑화된 상태관리 라이브러리런타임이 아닌 컴파일 시간에 프로그램임 오류를 감지어플리케이션 상태를 쉽게 관리하고 액세스하는 동시에 상태 불변성 (state immutabilty), 상태 격리 (state isolati

velog.io

 

아래는 새로 프로젝트를 생성시 나오는 카운터앱을 간단하게 riverpod 방식으로 바꾼것이다. 

눈여겨 봐야 할건

1. StateProvider를 통해 동적 상태관리
2. ref.read(appCount.notifier).state++ 를 통해서 상태변화 푸시
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

final appCount = StateProvider<int>((ref) {
  return 1;
});



class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    int count = ref.watch(appCount);
    return Scaffold(
      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Riverpod Sample app"),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$count',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          ref.read(appCount.notifier).state++;
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

'스터디 > Flutter' 카테고리의 다른 글

Dart 에서 Promise.all 을 구현해보자  (0) 2020.02.29
Flutter + Node + docker Sample Code  (0) 2019.06.14
Future of Flutter by Google IO  (0) 2019.05.22
커스텀 뷰 공부 1일차  (0) 2019.03.20
Flutter + Sqflite + Stetho 사용하기  (0) 2019.01.04

+ Recent posts