consult with Flutter developers <\/strong>to learn more about the entire process.<\/p>\nIn this article, we will discuss the fundamental things, such as how you can generate the providers from the functions with the new @riverpod syntax. Hence, this section will cover how you can declare the providers using @riverpod syntax, pass the arguments to a provider that overrides the old family modifier’s constraints, and convert the FutureProvider to the new syntax. So, let’s begin without delay.<\/p>\n
Step 1: New Project and the Mock Data<\/h3>\n
First, you must create the new project and include a data folder in your root directory. You have to update the pubspec.yaml file to access and use the data folder.<\/p>\n
dependencies:<\/p>\n
\u00a0 # orflutter_riverpod\/hooks_riverpod as per https:\/\/riverpod.dev\/docs\/getting_started<\/p>\n
riverpod:<\/p>\n
\u00a0 # the annotation package containing @riverpod<\/p>\n
riverpod_annotation:<\/p>\n
<\/p>\n
dev_dependencies:<\/p>\n
\u00a0 # a tool for running code generators<\/p>\n
build_runner:<\/p>\n
\u00a0 # the code generator<\/p>\n
riverpod_generator:<\/p>\n
You can begin the code generator in the ‘watch’ mode. So, for that to happen, you must run the ‘dart run build_runner watch’ command on the terminal. However, if you encounter version conflict, you may try another one,’ flutter pub run build_runnerwatch .’ It will look after every dart file in your new project. Additionally, it will update your generated code automatically when you make any changes.<\/p>\n
Step 2: Produce the First Annotated Provider<\/h3>\n
Now it is time to proceed by producing some providers. In this step, you must begin with creating some simple providers.<\/p>\n
\/\/ dio_provider.dart<\/p>\n
import ‘package:dio\/dio.dart’;<\/p>\n
import ‘package:flutter_riverpod\/flutter_riverpod.dart’;<\/p>\n
<\/p>\n
\/\/ a provider for the Dio client to be used by the rest of the app<\/p>\n
finaldioProvider = Provider<Dio>((ref) {<\/p>\n
returnDio();<\/p>\n
});<\/p>\n
After creating the providers, you should modify the files to use the new syntax.<\/p>\n
import ‘package:dio\/dio.dart’;<\/p>\n
\/\/ 1. import the riverpod_annotation package<\/p>\n
import ‘package:riverpod_annotation\/riverpod_annotation.dart’;<\/p>\n
<\/p>\n
\/\/ 2. add a part file<\/p>\n
part ‘dio_provider.g.dart’;<\/p>\n
<\/p>\n
\/\/ 3. use the @riverpod annotation<\/p>\n
@riverpod<\/p>\n
\/\/ 4. update the declaration<\/p>\n
Diodio(DioRef ref) {<\/p>\n
returnDio();<\/p>\n
}<\/p>\n
After you save this file, the build_runner will start working and create dio_provider. g. dart in that same data folder. Your new .g. dart files will automatically generate with the existing ones. Hence, there is no need to make any changes to your folder structure. However, you will see the following structure when you open your generated file.<\/p>\n
\/\/ GENERATED CODE – DO NOT MODIFY BY HAND<\/p>\n
<\/p>\n
part of ‘dio_provider.dart’;<\/p>\n
<\/p>\n
\/\/ **************************************************************************<\/p>\n
\/\/ RiverpodGenerator<\/p>\n
\/\/ **************************************************************************<\/p>\n
<\/p>\n
\/\/ ignore_for_file: avoid_private_typedef_functions, non_constant_identifier_names, subtype_of_sealed_class, invalid_use_of_internal_member, unused_element, constant_identifier_names, unnecessary_raw_strings, library_private_types_in_public_api<\/p>\n
<\/p>\n
\/\/\/ Copied from Dart SDK<\/p>\n
class _SystemHash {<\/p>\n
\u00a0 _SystemHash._();<\/p>\n
<\/p>\n
staticint combine(int hash, int value) {<\/p>\n
\u00a0\u00a0\u00a0 \/\/ ignore: parameter_assignments<\/p>\n
hash = 0x1fffffff & (hash + value);<\/p>\n
\u00a0\u00a0\u00a0 \/\/ ignore: parameter_assignments<\/p>\n
hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));<\/p>\n
return hash ^ (hash >> 6);<\/p>\n
\u00a0 }<\/p>\n
<\/p>\n
staticint finish(int hash) {<\/p>\n
\u00a0\u00a0\u00a0 \/\/ ignore: parameter_assignments<\/p>\n
hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));<\/p>\n
\u00a0\u00a0\u00a0 \/\/ ignore: parameter_assignments<\/p>\n
hash = hash ^ (hash >> 11);<\/p>\n
return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));<\/p>\n
\u00a0 }<\/p>\n
}<\/p>\n
<\/p>\n
String $dioHash() => r’58eeefbd0832498ca2574c1fe69ed783c58d1d8f’;<\/p>\n
<\/p>\n
\/\/\/ See also [dio].<\/p>\n
finaldioProvider = AutoDisposeProvider<Dio>(<\/p>\n
dio,<\/p>\n
name: r’dioProvider’,<\/p>\n
debugGetCreateSourceHash:<\/p>\n
constbool.fromEnvironment(‘dart.vm.product’) ? null : $dioHash,<\/p>\n
);<\/p>\n
typedefDioRef = AutoDisposeProviderRef<Dio>;<\/p>\n
You will notice some relevant things in this specific file. The file will contain the required dioProvider along with extra properties you need for debugging. Also, it defines the DioRef type like AutoDisposeProviderRef<Dio>. So, it implies that you have to write the following code.<\/p>\n
part ‘dio_provider.g.dart’;<\/p>\n
<\/p>\n
@riverpod<\/p>\n
Diodio(DioRef ref) {<\/p>\n
returnDio();<\/p>\n
}<\/p>\n
After this, the Riverpod generator will produce the corresponding DioRef and the DioProvider type, which you must pass as arguments to your function. Each provider produced with the Riverpod generator will, by default, use the autoDispose modifier.<\/p>\n
Step 3: Produce a Provider For the Repository Class<\/h3>\n
After getting the dioProvider, you must try using it somewhere. For instance, let’s think you have a MoviesRepository class which will further define a few techniques to fetch the movie’s data.<\/p>\n
You may write the following code to produce a provider for this specific repository.<\/p>\n
part ‘movies_repository.g.dart’;<\/p>\n
<\/p>\n
@riverpod<\/p>\n
MoviesRepositorymoviesRepository(MoviesRepositoryRef ref) =>MoviesRepository(<\/p>\n
client: ref.watch(dioProvider), \/\/ the provider we defined above<\/p>\n
apiKey: Env.tmdbApiKey, \/\/ a constant defined elsewhere<\/p>\n
\u00a0\u00a0\u00a0 );<\/p>\n
As a result, the Flutter Riverpod generator will produce the MoviesRepositoryProvider along with the MoviesRepositoryRef type for you. While producing the providers for any repository, do not include the @riverpod annotation. Instead, produce an individual global function that will return an instance of the specific repository to annotate it.<\/p>\n
Step 4: Produce and Read An Annotated FutureProvider<\/h3>\n
In this part, you should convert the FutureProvider to use @riverpod annotation.<\/p>\n
@riverpod<\/p>\n
Future<TMDBMovie>movie(<\/p>\n
MovieRef ref, {<\/p>\n
requiredintmovieId,<\/p>\n
}) {<\/p>\n
return ref<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 .watch(moviesRepositoryProvider)<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 .movie(movieId: movieId);<\/p>\n
}<\/p>\n
Then, you can watch the annotation inside the widget.<\/p>\n
classMovieDetailsScreen extends ConsumerWidget {<\/p>\n
constMovieDetailsScreen({super.key, required this.movieId});<\/p>\n
finalintmovieId;<\/p>\n
<\/p>\n
\u00a0 @override<\/p>\n
\u00a0 Widget build(BuildContext context, WidgetRef ref) {<\/p>\n
\u00a0\u00a0\u00a0 \/\/ movieId is a *named* argument<\/p>\n
finalmovieAsync = ref.watch(movieProvider(movieId: movieId));<\/p>\n
returnmovieAsync.when(<\/p>\n
error: (e, st) => Text(e.toString()),<\/p>\n
loading: () =>CircularProgressIndicator(),<\/p>\n
data: (movie) =>SomeMovieWidget(movie),<\/p>\n
\u00a0\u00a0\u00a0 );<\/p>\n
\u00a0 }<\/p>\n
}<\/p>\n
As you may notice, movieId is mainly a named argument, as we have referred to it in the movie section.<\/p>\n
@riverpod<\/p>\n
Future<TMDBMovie>movie(<\/p>\n
MovieRef ref, {<\/p>\n
requiredintmovieId,<\/p>\n
}) {<\/p>\n
return ref<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 .watch(moviesRepositoryProvider)<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 .movie(movieId: movieId);<\/p>\n
}<\/p>\n
It simply implies that there is no need to limit to defining a specific provider family along with the single positional argument. You must define a specific function using a ‘ref’ object and positional arguments as many as you want. The Riverpod generator will look after the rest of them.<\/p>\n
Conclusion<\/h2>\n
All in all, the Riverpod generator will bring several benefits to your table and give logical reasons to use it. It will generate the correct type of provider automatically, eliminating the chance of any error. Additionally, this framework offers a simplified process to create the providers with arguments.<\/p>\n
Also, the biggest advantage of using the Riverpod is it offers less type errors during runtime and improves type safety. However, you can use it on your own or consult with Flutter developers <\/strong>to try this framework and to learn about features in flutter 3.7<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Auto-Generate your Providers with Flutter Riverpod Generator? Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know…<\/p>\n","protected":false},"author":324,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[68433,68435,68436,68434],"class_list":["post-81183","post","type-post","status-publish","format-standard","hentry","category-technology","tag-an-introduction-to-the-flutter-riverpod","tag-new-project-and-the-mock-data","tag-produce-the-first-annotated-provider","tag-use-cases"],"yoast_head":"\n
How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts<\/title>\n<meta name=\"description\" content=\"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts\" \/>\n<meta property=\"og:description\" content=\"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"SIIT - Tech Guest Posts\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100088504218610\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-13T10:26:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-11T10:52:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/siit.co\/guestposts\/wp-content\/uploads\/2023\/03\/dc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"601\" \/>\n\t<meta property=\"og:image:height\" content=\"403\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"hearingrehabs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hearingrehabs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/\",\"url\":\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/\",\"name\":\"How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts\",\"isPartOf\":{\"@id\":\"https:\/\/siit.co\/guestposts\/#website\"},\"datePublished\":\"2023-03-13T10:26:18+00:00\",\"dateModified\":\"2023-04-11T10:52:45+00:00\",\"author\":{\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/44c7ac57a84ee862f79fb6c77f5173f1\"},\"description\":\"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter\",\"breadcrumb\":{\"@id\":\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/siit.co\/guestposts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Auto-Generate your Providers with Flutter Riverpod Generator?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/siit.co\/guestposts\/#website\",\"url\":\"https:\/\/siit.co\/guestposts\/\",\"name\":\"SIIT - Tech Guest Posts\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/siit.co\/guestposts\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/44c7ac57a84ee862f79fb6c77f5173f1\",\"name\":\"hearingrehabs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/125fccbc725a0c75eaf6ad96c937f42c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/125fccbc725a0c75eaf6ad96c937f42c?s=96&d=mm&r=g\",\"caption\":\"hearingrehabs\"},\"description\":\"We are a marketing company that is qualified & Professional Expert and licensed. Our company\u2019s aim is to lead from the front to achieve your Goal. we have experts with a lot of experience who can plan and run your campaigns successfully. Giving you information from our partners about transparency and accountability to give you an edge in the market! Increase the number of customers your business has and how well people know about it. Digital marketing has become the best and most powerful way to get customers interested in your brand by making people aware of it. The best digital marketing company in Lahore and the surrounding area is digital marketing. Digital marketing will spread the word about your business to a wide range of people. https:\/\/goo.gl\/maps\/3vVgXwKayQzuXCcZ7\",\"sameAs\":[\"https:\/\/digitalmarketingserviceslahore.pk\/\",\"https:\/\/www.facebook.com\/profile.php?id=100088504218610\",\"https:\/\/www.instagram.com\/digitaltecg567u\/\"],\"url\":\"https:\/\/siit.co\/guestposts\/author\/hearingrehabs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts","description":"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/","og_locale":"en_US","og_type":"article","og_title":"How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts","og_description":"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter","og_url":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/","og_site_name":"SIIT - Tech Guest Posts","article_author":"https:\/\/www.facebook.com\/profile.php?id=100088504218610","article_published_time":"2023-03-13T10:26:18+00:00","article_modified_time":"2023-04-11T10:52:45+00:00","og_image":[{"width":601,"height":403,"url":"https:\/\/siit.co\/guestposts\/wp-content\/uploads\/2023\/03\/dc.png","type":"image\/png"}],"author":"hearingrehabs","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hearingrehabs","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/","url":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/","name":"How to Auto-Generate your Providers with Flutter Riverpod Generator? - SIIT - Tech Guest Posts","isPartOf":{"@id":"https:\/\/siit.co\/guestposts\/#website"},"datePublished":"2023-03-13T10:26:18+00:00","dateModified":"2023-04-11T10:52:45+00:00","author":{"@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/44c7ac57a84ee862f79fb6c77f5173f1"},"description":"Learning the fundamental concept of the Flutter Riverpod repository is crucial. It will help you know the primary role of the Flutter","breadcrumb":{"@id":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/siit.co\/guestposts\/how-to-auto-generate-your-providers-with-flutter-riverpod-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siit.co\/guestposts\/"},{"@type":"ListItem","position":2,"name":"How to Auto-Generate your Providers with Flutter Riverpod Generator?"}]},{"@type":"WebSite","@id":"https:\/\/siit.co\/guestposts\/#website","url":"https:\/\/siit.co\/guestposts\/","name":"SIIT - Tech Guest Posts","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siit.co\/guestposts\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/44c7ac57a84ee862f79fb6c77f5173f1","name":"hearingrehabs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/125fccbc725a0c75eaf6ad96c937f42c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/125fccbc725a0c75eaf6ad96c937f42c?s=96&d=mm&r=g","caption":"hearingrehabs"},"description":"We are a marketing company that is qualified & Professional Expert and licensed. Our company\u2019s aim is to lead from the front to achieve your Goal. we have experts with a lot of experience who can plan and run your campaigns successfully. Giving you information from our partners about transparency and accountability to give you an edge in the market! Increase the number of customers your business has and how well people know about it. Digital marketing has become the best and most powerful way to get customers interested in your brand by making people aware of it. The best digital marketing company in Lahore and the surrounding area is digital marketing. Digital marketing will spread the word about your business to a wide range of people. https:\/\/goo.gl\/maps\/3vVgXwKayQzuXCcZ7","sameAs":["https:\/\/digitalmarketingserviceslahore.pk\/","https:\/\/www.facebook.com\/profile.php?id=100088504218610","https:\/\/www.instagram.com\/digitaltecg567u\/"],"url":"https:\/\/siit.co\/guestposts\/author\/hearingrehabs\/"}]}},"_links":{"self":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts\/81183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/users\/324"}],"replies":[{"embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/comments?post=81183"}],"version-history":[{"count":0,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts\/81183\/revisions"}],"wp:attachment":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/media?parent=81183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/categories?post=81183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/tags?post=81183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}