Flutter with riverpod and code structure

Explain my experience with riverpod and and discussing clean architecture and useful packages.

Transcript

1. Flutter with Riverpod and Code Structure Tanmay Soni MACS @Concordia University
2. Tanmay Soni MACS @Concordia University | Flutter Developer @Common • 4yr+ Software Developer (Flutter, React.js, Node.js, Java …) • https://www.linkedin.com/in/soni-tanmay/
3. Agenda 1 2 3 4 5 6 Riverpod Introduction & Installation Riverpod Implementation Code Demo Code Structure Packages & Tools Q&A
4. Riverpod Introduction & Installation
5. Why Riverpod? RiverPod => A Reactive Caching and Data-binding Framework • Declarative and Reactive Programming. • Handles a significant portion of your app's logic. • Built-in Error Handling and Caching. • Automatic Re-fetching
6. How to Install • flutter pub add flutter_riverpod • flutter pub add riverpod_annotation • flutter pub add dev:riverpod_generator • flutter pub add dev:build_runner • flutter pub add dev:custom_lint • flutter pub add dev:riverpod_lint Alternatively, you can manually add the dependency to your application’s pubspec.yaml file
7. Code Generation flutter pub run build_runner watch We need to run this to enable auto code generation. With this, every time we modify the riverpod-related code, it automatically generates it.
8. Enabling riverpod_lint/custom_lint • Riverpod comes with an optional riverpod_lint package that provides lint rules to help you write better code, and provide custom refactoring options. • The package should already be installed if you followed the previous steps, but a separate step is necessary to enable it. To enable riverpod_lint, you need add an analysis_options.yaml placed next to your pubspec.yaml and include the following:
9. Riverpod Implementation
10. Before we start making network requests, make sure that ProviderScope is added at the root of the application. Setting up ProviderScope
11. • All providers must be annotated with @riverpod or @Riverpod(). • The name of the annotated function determines how the provider will be interacted with. For a given function myFunction, a generated myFunctionProvider variable will be generated. • Must specify a "ref" as first parameter. Creating the provider (Functional Provider)
12. Example
13. • All notifiers must override the build method. This method is equivalent to the place where you would normally put your logic in a non-notifier provider. • When a @riverpod annotation is placed on a class, that class is called a "Notifier". The class must extend _$NotifierName, where NotifierName is class name. • Notifiers are responsible for exposing ways to modify the state of the provider. • Public methods on this class are accessible to consumers using ref.read(yourProvider.notifier).yourMethod(). Defining a Notifier (Class Provider)
14. Example
15. • A Consumer is a widget similar to Builder, but with the added benefit of offering us a "ref". • This enables our UI to read providers. • Widgets can listen to as many providers as they want. To do so, simply add more ref.watch calls. Consumer
16. • Instead of writing a StatelessWidget/StatefulWidget returns a Consumer, we can define a ConsumerWidget/ConsumerStatefulWidget. ConsumerWidget / ConsumerStatefulWidget
17. ref.watch(): Any widget that is listening to this provider will rebuild whenever the provider’s state changes. ref.listen(): Go-to for reacting to state changes with side effects, such as showing a SnackBar or logging. ref.read(): Typically used for accessing a provider’s current state without listening to it. Whenever possible, prefer using ref.watch over ref.listen or ref.read to implement a feature. This way, the application becomes reactive and declarative. But it is recommended to use ref.read when logic is performed in event handlers such as "onPressed". + + + How to read provider state?
18. Code Demo https://github.com/soni-tanmay/Flutter_Riverpod_Clean_Architecture
19. Code Structure
20. Folder Structure
21. Packages & Tools
22. Packages • flutter_screenutil • go_router • flutter_gen • build_runner • flutter_localizations • freezed • icons_launcher • riverpod_generator • sqflite • dio
23. Questions?
24. THANK YOU! v