Anatomy of Riverpod - 박제창 @MODUPOP

Slide 1

Slide 1 text

Anatomy of Riverpod - 박제창 MODUPOP x Flutter Seoul Version 1.0 Anatomy of Riverpod Dreamus Company - 박제창 1

Slide 2

Slide 2 text

Anatomy of Riverpod - 박제창 드림어스컴퍼니 박제창 (Dreamwalker) ● Dreamus Company ● Flutter Seoul - Organizer ● GDG Golang Korea - Organizer ● Github: JAICHANGPARK ● Twitter: @jaichangpark ● Linkedin

Slide 3

Slide 3 text

Anatomy of Riverpod - 박제창 드림어스컴퍼니 IRIVER Astell&Kern  3

Slide 4

Slide 4 text

Anatomy of Riverpod - 박제창 4

Slide 5

Slide 5 text

Anatomy of Riverpod - 박제창 5 Flutter Seoul Discord flutter-seoul.com https://www.meetup.com/ko- KR/flutter-seoul/

Slide 6

Slide 6 text

Anatomy of Riverpod - 박제창 6

Slide 7

Slide 7 text

Anatomy of Riverpod - 박제창 7 https://youtu.be/ZtR8ux9y5AI https://youtu.be/aZHpeMubVLM https://youtu.be/1pLtE_akP90 https://youtu.be/dRKuDu9c1So 설마 아직도 안 보시분.. 없으시겠죠?

Slide 8

Slide 8 text

Anatomy of Riverpod - 박제창 8 GDG Golang Korea https://festa.io/events/3363 https://festa.io/events/3364

Slide 9

Slide 9 text

Anatomy of Riverpod - 박제창 MODUPOP x Flutter Seoul Version 1.0 TOC Flutter State management Riverpod Riverpod Graph Riverpod Generator Riverpod lint 9

Slide 10

Slide 10 text

Anatomy of Riverpod - 박제창 Overview State management is a complex topic. If you feel that some of your questions haven’t been answered, or that the approach described on these pages is not viable for your use cases, you are probably right 10 Flutter State management

Slide 11

Slide 11 text

Anatomy of Riverpod - 박제창 11 Flutter State management

Slide 12

Slide 12 text

Anatomy of Riverpod - 박제창 12 Flutter State management 상태관리 언제&왜 사용하세요? 아니면 언제 사용될까요?

Slide 13

Slide 13 text

Anatomy of Riverpod - 박제창 13 Flutter State management 화면의 데이터를 잠시 저장 테마 변경 설정 상태 등등등

Slide 14

Slide 14 text

Anatomy of Riverpod - 박제창 14 Flutter State management Flutter is declarative. This means that Flutter builds its user interface to reﬂect the current state of your app When the state of your app changes (for example, the user ﬂips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. https://docs.flutter.dev/development/data-and-backend/state-mgmt/declarative

Slide 15

Slide 15 text

Anatomy of Riverpod - 박제창 15 Flutter State management Frameworks from Win32 to web to Android and iOS typically use an imperative style of UI programming

Slide 16

Slide 16 text

Anatomy of Riverpod - 박제창 16 Flutter State management Imperative Frameworks from Win32 to web to Android and iOS typically use an imperative style of UI programming Java Kotlin

Slide 17

Slide 17 text

Anatomy of Riverpod - 박제창 17 Flutter State management ● https://developer.android.com/jetpack/compose?gclid=CjwKCAjwue6hBhBVEiwA9YTx8M46jT7q0GQIEDDiIwGBm0Wpb1V5spsIfA im3kfFLEK4z90pN68AAxoCyRoQAvD_BwE&gclsrc=aw.ds&hl=ko ● https://developer.android.com/jetpack/compose/mental-model?hl=ko

Slide 18

Slide 18 text

Anatomy of Riverpod - 박제창 18 Flutter State management https://developer.apple.com/kr/xcode/swiftui/

Slide 19

Slide 19 text

Anatomy of Riverpod - 박제창 19 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/ephemeral-vs-app ● User preferences ● Login info ● Notiﬁcations in a social networking app ● The shopping cart in an e-commerce app ● Read/unread state of articles in a news app ● current page in a PageView ● current progress of a complex animation ● current selected tab in a BottomNavigationBar

Slide 20

Slide 20 text

Anatomy of Riverpod - 박제창 20 Flutter State management Widget & State “Everything is a Widget” Flutter Widget = Immutable Widget != Life Cycle ● StatelessWidget ● StatefulWidget

Slide 21

Slide 21 text

Anatomy of Riverpod - 박제창 21 Flutter State management Widget & State “Everything is a Widget” Flutter Widget = Immutable Widget != Life Cycle ● StatelessWidget ● StatefulWidget

Slide 22

Slide 22 text

Anatomy of Riverpod - 박제창 22 Flutter State management https://docs.flutter.dev/resources/architectural-overview#layout-and-rendering

Slide 23

Slide 23 text

Anatomy of Riverpod - 박제창 23 Flutter State management initState() didChangeDependencies dirty build clean dispose setState didUpdateWidget State Lifecycle Construction

Slide 24

Slide 24 text

Anatomy of Riverpod - 박제창 24 Flutter State management

Slide 25

Slide 25 text

Anatomy of Riverpod - 박제창 25

Slide 26

Slide 26 text

Anatomy of Riverpod - 박제창 26 Scaffold Center Colum Text Text FAB setState() build() build() build() build()

Slide 27

Slide 27 text

Anatomy of Riverpod - 박제창 27 https://docs.flutter.dev/resources/architectural-overview#from-user-input-to-the-gpu n x build()

Slide 28

Slide 28 text

Anatomy of Riverpod - 박제창 28 https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro

Slide 29

Slide 29 text

Anatomy of Riverpod - 박제창 29 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro

Slide 30

Slide 30 text

Anatomy of Riverpod - 박제창 30 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro

Slide 31

Slide 31 text

Anatomy of Riverpod - 박제창 31 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro void myTapHandler(BuildContext context) { var cartModel = somehowGetMyCartModel(context); cartModel.add(item); }

Slide 32

Slide 32 text

Anatomy of Riverpod - 박제창 32 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple Widget build(BuildContext context) { var cartModel = somehowGetMyCartModel(context); return SomeWidget( // Just construct the UI once, using the current state of the cart. ); }

Slide 33

Slide 33 text

Anatomy of Riverpod - 박제창 33 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro

Slide 34

Slide 34 text

Anatomy of Riverpod - 박제창 34 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple ChangeNotifier

Slide 35

Slide 35 text

Anatomy of Riverpod - 박제창 35 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple ChangeNotifierProvider

Slide 36

Slide 36 text

Anatomy of Riverpod - 박제창 36 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple Consumer

Slide 37

Slide 37 text

Anatomy of Riverpod - 박제창 37 Flutter State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple Provider.of 잠시 뒤에서 만나요~

Slide 38

Slide 38 text

Anatomy of Riverpod - 박제창 38 Flutter State management Provider Riverpod setState InheritedWidget & InheritedModel Redux Fish-Redux BLoC / Rx GetIt MobX Flutter Commands Binder GetX states_rebuilder Triple Pattern (Segmented State Pattern) solidart ﬂutter_reactive_widget List of state management approaches

Slide 39

Slide 39 text

Anatomy of Riverpod - 박제창 39 Flutter State management https://namu.wiki/w/%EC%82%BC%EB%8C%80%EC%9E%A5 일부 가공 BLoC GetX Provider Flutter 상태관 리 Riverpod

Slide 40

Slide 40 text

Anatomy of Riverpod - 박제창 40 Flutter State management setState() Notify the framework that the internal state of this object has changed. https://api.flutter.dev/flutter/widgets/State/setState.html

Slide 41

Slide 41 text

Anatomy of Riverpod - 박제창 41 Flutter State management InheritedWidget() Base class for widgets that eﬃciently propagate information down the tree. To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.dependOnInheritedWidgetOfExactType. Inherited widgets, when referenced in this way, will cause the consumer to rebuild when the inherited widget itself changes state. https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html

Slide 42

Slide 42 text

Anatomy of Riverpod - 박제창 42 Flutter State management Inherited Widgets Explained - Flutter Widgets 101 Ep. 3 InheritedWidgets | Decoding Flutter InheritedWidget()

Slide 43

Slide 43 text

Anatomy of Riverpod - 박제창 43 Flutter State management Scope Model https://pub.dev/packages/scoped_model

Slide 44

Slide 44 text

Anatomy of Riverpod - 박제창 44 Flutter State management BLoC Business Logic Component Flutter / AngularDart – Code sharing, better together (DartConf 2018)

Slide 45

Slide 45 text

Anatomy of Riverpod - 박제창 45 Flutter State management GetX https://pub.dev/packages/get

Slide 46

Slide 46 text

Anatomy of Riverpod - 박제창 46 Flutter State management Provider https://pub.dev/packages/provider

Slide 47

Slide 47 text

Anatomy of Riverpod - 박제창 47 Flutter State management Provider True: dependOnInheritedWidgetOfExactType False: getElementForInheritedWidgetOfExactType

Slide 48

Slide 48 text

Anatomy of Riverpod - 박제창 48 Flutter State management Provider Pragmatic State Management in Flutter (Google I/O'19)

Slide 49

Slide 49 text

Anatomy of Riverpod - 박제창 49 Flutter State management Provider Remi Rousselet Provider: https:/ /github.com/rrousselGit/provider Riverpod: https:/ /github.com/rrousselGit/riverpod Freezed: https:/ /github.com/rrousselGit/freezed etc..

Slide 50

Slide 50 text

Anatomy of Riverpod - 박제창 Riverpod 50

Slide 51

Slide 51 text

Anatomy of Riverpod - 박제창 51 Upsplash @magict1911

Slide 52

Slide 52 text

Anatomy of Riverpod - 박제창 52 Riverpod https://riverpod.dev/ https://github.com/rrousselGit/riverpod

Slide 53

Slide 53 text

Anatomy of Riverpod - 박제창 53 Riverpod Riverpod 사용하고 계신분??

Slide 54

Slide 54 text

Anatomy of Riverpod - 박제창 54 Riverpod https://ar.pinterest.com/pin/605523112380045935/ https://www.quora.com/Why-did-Voldemort-take-the-Muggle-ti tle-Lord-Did-any-previous-wizards-use-such-titles

Slide 55

Slide 55 text

Anatomy of Riverpod - 박제창 55 Riverpod 0 1 2 3 4 5 6 7 P R O V I D E R

Slide 56

Slide 56 text

Anatomy of Riverpod - 박제창 56 Riverpod 0 1 2 3 4 5 6 7 P R O V I D E R R I V E R P O D 1 4 3 6 7 0 2 5

Slide 57

Slide 57 text

Anatomy of Riverpod - 박제창 57 Riverpod 0 1 2 3 4 5 6 7 P R O V I D E R R I V E R P O D 1 4 3 6 7 0 2 5

Slide 58

Slide 58 text

Anatomy of Riverpod - 박제창 58 Riverpod 0 1 2 3 4 5 6 7 P R O V I D E R R I V E R P O D 1 4 3 6 7 0 2 5 Anagram

Slide 59

Slide 59 text

Anatomy of Riverpod - 박제창 59 Riverpod A Reactive State-Management and Dependency Injection Framework A Reactive Caching and Data-binding Framework

Slide 60

Slide 60 text

Anatomy of Riverpod - 박제창 60 Riverpod Motivation Modern applications rarely come with all the information necessary to render their User Interface. Instead, the data is often fetched asynchronously from a server. The problem is, working with asynchronous code is hard. Although Flutter comes with some way to store state, it doesn't do much besides that. Thus, a number of challenges remain unsolved: ● Asynchronous requests need to be cached locally, as it would be unreasonable to re-execute them whenever the UI refreshes. ● Since we have a cache, our cache could get out of date if we're not careful. ● We also need to handle errors and loading states

Slide 61

Slide 61 text

Anatomy of Riverpod - 박제창 61 Riverpod Motivation ● Reading objects is now compile-safe. No more runtime exception. ● It makes the provider pattern more ﬂexible, which allows supporting commonly requested features like: a. Being able to have multiple providers of the same type. b. Disposing the state of a provider when it is no longer used. c. Have computed states d. Making a provider private. ● Simpliﬁes complex object graphs. It is easier to depend on asynchronous state. ● Makes the pattern independent from Flutter

Slide 62

Slide 62 text

Anatomy of Riverpod - 박제창 62 Riverpod Motivation ● Reading objects is now compile-safe. ● No more runtime exception. - 사용자 & 고객 - 어? 화면이 회색으로 아무것도 안 보여요.. 😡 - 앱 삭제 - 리뷰 영향 - 서비스 이미지 영향

Slide 63

Slide 63 text

Anatomy of Riverpod - 박제창 63 Riverpod Documentation

Slide 64

Slide 64 text

Anatomy of Riverpod - 박제창 64 Riverpod DartPad https://dartpad.dev/?null_safety=true&id=ef06ab3ce0b822e6cc5db0575248e6e2

Slide 65

Slide 65 text

Anatomy of Riverpod - 박제창 65 Riverpod Code Snippet https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets

Slide 66

Slide 66 text

Anatomy of Riverpod - 박제창 66 Riverpod Types of Providers Provider Type Provider Create Function Example Use Case Provider ( fully immutable.) Returns any type A service class / computed property (filtered list) StateProvider Returns any type A filter condition / simple state object FutureProvider Returns a Future of any type A result from an API call StreamProvider Returns a Stream of any type A stream of results from an API StateNotifierProvider Returns a subclass of StateNotifier A complex state object that is immutable except through an interface ChangeNotifierProvider Returns a subclass of ChangeNotifier A complex state object that requires mutability (Async)NotifierProvider - New 2.0

Slide 67

Slide 67 text

Anatomy of Riverpod - 박제창 67 Riverpod Counter App Migration → FAB 을 누르면 숫자가 1씩 증가하는

Slide 68

Slide 68 text

Anatomy of Riverpod - 박제창 68 Riverpod Counter App Migration flutter pub add flutter_riverpod dev:custom_lint dev:riverpod_lint riverpod_annotation dev:build_runner dev:riverpod_generator

Slide 69

Slide 69 text

Anatomy of Riverpod - 박제창 69 Riverpod Counter App Migration 1. ProviderScope로 감싸기

Slide 70

Slide 70 text

Anatomy of Riverpod - 박제창 70 Riverpod Counter App Migration 아까 어디서 본거같은데~? 기억나시죠?

Slide 71

Slide 71 text

Anatomy of Riverpod - 박제창 71 Riverpod Counter App Migration

Slide 72

Slide 72 text

Anatomy of Riverpod - 박제창 72 Riverpod Counter App Migration final _counterProvider = StateProvider((ref) => 0); 2. State 정의하기 2.1 StateProvider 사용 (cuz.. Simple value)

Slide 73

Slide 73 text

Anatomy of Riverpod - 박제창 73 Riverpod Counter App Migration Provider Type Provider Create Function Example Use Case Provider Returns any type A service class / computed property (filtered list) StateProvider Returns any type A filter condition / simple state object FutureProvider Returns a Future of any type A result from an API call StreamProvider Returns a Stream of any type A stream of results from an API StateNotifierProvider Returns a subclass of StateNotifier A complex state object that is immutable except through an interface ChangeNotifierProvider Returns a subclass of ChangeNotifier A complex state object that requires mutability (Async)NotifierProvider - New 2.0

Slide 74

Slide 74 text

Anatomy of Riverpod - 박제창 74 Riverpod Counter App Migration StateProvider exists primarily to allow the modification of simple variables by the User Interface. The state of a StateProvider is typically one of: ● an enum, such as a filter type ● a String, typically the raw content of a text field ● a boolean, for checkboxes ● a number, for pagination or age form fields You should not use StateProvider if: ● your state needs validation logic ● your state is a complex object (such as a custom class, a list/map, ...) ● the logic for modifying your state is more advanced than a simple count++. https://docs-v2.riverpod.dev/docs/providers/state_provider

Slide 75

Slide 75 text

Anatomy of Riverpod - 박제창 75 Riverpod Counter App Migration 3. Provider 읽기

Slide 76

Slide 76 text

Anatomy of Riverpod - 박제창 76 Riverpod Counter App Migration 3. Provider 읽기

Slide 77

Slide 77 text

Anatomy of Riverpod - 박제창 77 Riverpod Counter App Migration 3. Provider 읽기

Slide 78

Slide 78 text

Anatomy of Riverpod - 박제창 78 Riverpod Counter App Migration 4. State 업데이트 (FAB tab action) ref.read ⇒ listening 없이 Provider를 읽어올때 사용

Slide 79

Slide 79 text

Anatomy of Riverpod - 박제창 79 Riverpod Counter App Migration App ProviderScope MaterialApp ConsumerWidget Scaffold Column Text Consumer Fab Text Tab! ref.read(counterPr ovider.notifier).stat e++ sub ref.watch(counterProvider)

Slide 80

Slide 80 text

Anatomy of Riverpod - 박제창 80 Riverpod Provider 읽기 final provider = Provider((ref) { // use ref to obtain other providers final repository = ref.watch(repositoryProvider); return SomeValue(repository); }) final counterProvider = StateNotifierProvider((ref) { return Counter(ref); }); class Counter extends StateNotifier { Counter(this.ref): super(0); final Ref ref; void increment() { // Counter can use the "ref" to read other providers final repository = ref.read(repositoryProvider); repository.post('...'); } }

Slide 81

Slide 81 text

Anatomy of Riverpod - 박제창 81 Riverpod Provider 읽기 final counterProvider = StateNotifierProvider((ref) => Counter(ref)); final anotherProvider = Provider((ref) { ref.listen(counterProvider, (int? previousCount, int newCount) { print('The counter changed $newCount'); }); // ... });

Slide 82

Slide 82 text

Anatomy of Riverpod - 박제창 82 Riverpod Provider 읽기 final counterProvider = StateNotifierProvider((ref) => Counter(ref)); class HomeView extends ConsumerWidget { const HomeView({Key? key}): super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { ref.listen(counterProvider, (int? previousCount, int newCount) { print('The counter changed $newCount'); }); return Container(); } }

Slide 83

Slide 83 text

Anatomy of Riverpod - 박제창 83 Riverpod Provider 읽기 Widget build(BuildContext context, WidgetRef ref) { AsyncValue user = ref.watch(userProvider); return user.when( loading: () => const CircularProgressIndicator(), error: (error, stack) => const Text('Oops'), data: (user) => Text(user.name), ); }

Slide 84

Slide 84 text

Anatomy of Riverpod - 박제창 84 Riverpod FutureProvider final configProvider = FutureProvider((ref) async { final content = json.decode( await rootBundle.loadString('assets/configurations.json'), ) as Map; return Configuration.fromJson(content); }); Widget build(BuildContext context, WidgetRef ref) { AsyncValue config = ref.watch(configProvider); return config.when( loading: () => const CircularProgressIndicator(), error: (err, stack) => Text('Error: $err'), data: (config) { return Text(config.host); }, ); }

Slide 85

Slide 85 text

Anatomy of Riverpod - 박제창 85 Riverpod StreamProvider - Usage example: live chat using sockets final chatProvider = StreamProvider>((ref) async* { final socket = await Socket.connect('my-api', 4242); ref.onDispose(socket.close); var allMessages = const []; await for (final message in socket.map(utf8.decode)) { allMessages = [...allMessages, message]; yield allMessages; } });

Slide 86

Slide 86 text

Anatomy of Riverpod - 박제창 86 Riverpod StreamProvider - Usage example: live chat using sockets Widget build(BuildContext context, WidgetRef ref) { final liveChats = ref.watch(chatProvider); return liveChats.when( loading: () => const CircularProgressIndicator(), error: (error, stackTrace) => Text(error.toString()), data: (messages) { return ListView.builder( reverse: true, itemCount: messages.length, itemBuilder: (context, index) { final message = messages[index]; return Text(message); }, ); }, ); }

Slide 87

Slide 87 text

Anatomy of Riverpod - 박제창 87 Riverpod StateNotiﬁerProvider → (v2.0) NotiﬁerProvider class TodosNotifier extends StateNotifier> { TodosNotifier(): super([]); void addTodo(Todo todo) { state = [...state, todo]; } // Let's allow removing todos void removeTodo(String todoId) { state = [ for (final todo in state) if (todo.id != todoId) todo, ]; } }

Slide 88

Slide 88 text

Anatomy of Riverpod - 박제창 88 Riverpod StateNotiﬁerProvider → (v2.0) NotiﬁerProvider final todosProvider = StateNotifierProvider>((ref) { return TodosNotifier(); });

Slide 89

Slide 89 text

Anatomy of Riverpod - 박제창 89 Riverpod ProviderObserver ProviderObserver listens to the changes of a ProviderContainer. ● didAddProvider is called every time a provider was initialized, and the value exposed is value. ● didDisposeProvider is called every time a provider was disposed. ● didUpdateProvider is called every time by providers when they emit a notification.

Slide 90

Slide 90 text

Anatomy of Riverpod - 박제창 90 Riverpod ProviderObserver ProviderObserver listens to the changes of a ProviderContainer. class Logger extends ProviderObserver { @override void didUpdateProvider( ProviderBase provider, Object? previousValue, Object? newValue, ProviderContainer container, ) { print(''' { "provider": "${provider.name ?? provider.runtimeType}", "newValue": "$newValue" }'''); } } void main() { runApp( ProviderScope( observers: [Logger()], child: const MyApp()), ); } observer는 여러개 가능 Debugging시 매우 유용

Slide 91

Slide 91 text

Anatomy of Riverpod - 박제창 91 Riverpod Riverpod Graph WIP https://mermaid.js.org/#/ https://github.com/rrousselGit/riverp od/tree/master/packages/riverpod_ graph

Slide 92

Slide 92 text

Anatomy of Riverpod - 박제창 92 Riverpod Riverpod Graph - WIP https://mermaid.js.org/#/

Slide 93

Slide 93 text

Anatomy of Riverpod - 박제창 93 Riverpod Riverpod Graph - WIP https://mermaid.js.org/#/ flowchart TB subgraph Arrows direction LR start1[ ] -..->|read| stop1[ ] style start1 height:0px; style stop1 height:0px; start2[ ] --->|listen| stop2[ ] style start2 height:0px; style stop2 height:0px; start3[ ] ===>|watch| stop3[ ] style start3 height:0px; style stop3 height:0px; end subgraph Type direction TB ConsumerWidget((widget)); Provider[[provider]]; end

Slide 94

Slide 94 text

Anatomy of Riverpod - 박제창 94 Riverpod Riverpod Graph - WIP https://mermaid.js.org/#/ flowchart TB subgraph Arrows direction LR start1[ ] -..->|read| stop1[ ] style start1 height:0px; style stop1 height:0px; start2[ ] --->|listen| stop2[ ] style start2 height:0px; style stop2 height:0px; start3[ ] ===>|watch| stop3[ ] style start3 height:0px; style stop3 height:0px; end subgraph Type direction TB ConsumerWidget ((widget)); Provider[[provider]]; end

Slide 95

Slide 95 text

Anatomy of Riverpod - 박제창 95 Riverpod Riverpod Generator → code generation https://github.com/rrousselGit/riverpod/tree/master/packages/riverpod_generator https://pub.dev/packages/riverpod_generator

Slide 96

Slide 96 text

Anatomy of Riverpod - 박제창 96 Riverpod Riverpod Generator → code generation

Slide 97

Slide 97 text

Anatomy of Riverpod - 박제창 97 Riverpod Riverpod Generator → code generation

Slide 98

Slide 98 text

Anatomy of Riverpod - 박제창 98 Riverpod Riverpod Generator → code generation

Slide 99

Slide 99 text

Anatomy of Riverpod - 박제창 99 Riverpod Riverpod Generator → code generation generator로 StateProvider는 못 만드나요? 네, 그렇습니다. https://github.com/rrousselGit/riverpod/discussions/1725#discussioncomment-3797487

Slide 100

Slide 100 text

Anatomy of Riverpod - 박제창 100 Riverpod Riverpod Generator → code generation AutoDisposeNotifierProvider

Slide 101

Slide 101 text

Anatomy of Riverpod - 박제창 101 Riverpod Riverpod Generator → code generation AutoDisposeProvider

Slide 102

Slide 102 text

Anatomy of Riverpod - 박제창 102 Riverpod Riverpod lint https://pub.dev/packages/riverpod_lint#installing-riverpod_lint

Slide 103

Slide 103 text

Anatomy of Riverpod - 박제창 103 dev_dependencies: custom_lint: riverpod_lint: analyzer: plugins: - custom_lint Riverpod Riverpod lint dart run custom_lint

Slide 104

Slide 104 text

Anatomy of Riverpod - 박제창 104 Riverpod Riverpod lint

Slide 105

Slide 105 text

Anatomy of Riverpod - 박제창 105 analyzer: plugins: - custom_lint custom_lint: rules: - missing_provider_scope: true Riverpod Riverpod lint dart run custom_lint

Slide 106

Slide 106 text

Anatomy of Riverpod - 박제창 106 Riverpod Riverpod lint ● Enable_all_lint_rules ● Missing_provider_scope ● provider_dependencies ● Scoped_providers_should_specify_dependencies ● Avoid_manual_providers_as_generated_provider_dependency ● provider_parameters ● avoid_public_notiﬁer_properties ● unsupported_provider_value ● stateless_ref ● generator_class_extends

Slide 107

Slide 107 text

Anatomy of Riverpod - 박제창 107 Riverpod Will provider be deprecated/stop being supported? Not in the short term, no. ↓ Maybe.

Slide 108

Slide 108 text

Anatomy of Riverpod - 박제창 108 Riverpod Provider likely will be deprecated. But that's because Riverpod is it's successor, and I actively work on Riverpod For the "Provider will be deprecated", there are two things to keep in mind: - I will write a tool to automatically migrate from Provider to Riverpod - I'm currently working on a Flutter PR to allow `http:/ /context.watch` in Riverpod (although unclear whether it'll pass) @Remi Rousselet, 2022.08.14

Slide 109

Slide 109 text

Anatomy of Riverpod - 박제창 109 Summary 1. Flutter State Management a. Everything is a widget b. Widget = immutable c. State = Lifecycle 2. List of ﬂutter state management a. setState() b. inheritedWidget c. Scope Model, BLoC, GetX, Provider, Riverpod…etc 3. Riverpod a. Hmmmm, Riverpod 2.0! b. Provider, StateProvider, FutureProvider, StreamProvider and NotiﬁerProvider(new) c. Riverpod Graph(WIP), Generator, Lint!

Slide 110

Slide 110 text

Anatomy of Riverpod - 박제창 110 https://medium.com/flutter-korea/flutter-state-management-라이브러리-꼭-필요한가-e244251475c3 음?

Slide 111

Slide 111 text

Anatomy of Riverpod - 박제창 Thank you. Anatomy of Riverpod Dreamus Company - 박제창 111