Riverpod는 기존의 provider 를 개선해서 나온 업그레이드 버전이다.
정식 패키지는
자세한 설명은
아래는 새로 프로젝트를 생성시 나오는 카운터앱을 간단하게 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 |