Flutter + Riverpod 카운터앱

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

정식 패키지는 

https://riverpod.dev/ko/

Riverpod

자세한 설명은

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을 사용하는 방법

 

아래는 새로 프로젝트를 생성시 나오는 카운터앱을 간단하게 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.
    );
  }
}