Flutter with Riverpod and Code Structure Tanmay Soni MACS @Concordia University

Tanmay Soni MACS @Concordia University | Flutter Developer @Common ● 4yr+ Software Developer (Flutter, React.js, Node.js, Java …) ● https://www.linkedin.com/in/soni-tanmay/

Agenda 1 2 3 4 5 6 Riverpod Introduction & Installation Riverpod Implementation Code Demo Code Structure Packages & Tools Q&A

Riverpod Introduction & Installation

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

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

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.

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:

Riverpod Implementation

Before we start making network requests, make sure that ProviderScope is added at the root of the application. Setting up ProviderScope

● 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)

Example

● 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)

Example

● 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

● Instead of writing a StatelessWidget/StatefulWidget returns a Consumer, we can define a ConsumerWidget/ConsumerStatefulWidget. ConsumerWidget / ConsumerStatefulWidget

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?

Code Demo https://github.com/soni-tanmay/Flutter_Riverpod_Clean_Architecture

Code Structure

Folder Structure

Packages & Tools

Packages ● flutter_screenutil ● go_router ● flutter_gen ● build_runner ● flutter_localizations ● freezed ● icons_launcher ● riverpod_generator ● sqflite ● dio

Questions?

THANK YOU! v