Riverpod 2.x Code Generator for Flutter Developers - Create Your Providers Without Hassle

hi everyone and welcome to this video this is a supplementary video that I'm now recording for the riverpod a course that I just have put on my YouTube channel and this video is for those of you who've already completed the riverpod course so I'm assuming at the moment since this video is coming out just about two days after the 17 hour hours riverpod course came out that not so many people have had really the time to go through that course completely but I have to record this video anyways as it is something that I promise to do and it is related to code generation for riverpod at a time of recording this video code generation for riverpot isn't that advanced as you'd like it to be really as it doesn't work with for instance stream providers however the concept still is a good concept to start with and I thought to record this video before people start wondering okay but but why didn't we actually work on the report code generation in this 17 hours course that we have for riverpot which is available now on my YouTube channel so in this video we will focus purely on code generation for riverpot it will make your provider creation a little bit easier it does have its quirks and it is completely an optional thing to do you do not have to work with riverpot code generation in order to work with riverpot at all so if you're interested in code generation then this video is for you and also this video is definitely for people who as I mentioned have already gone through the riverpod course if you haven't watched that course this video probably won't be that useful to you but still you could watch it and see how code generation works with riverpot just to get an idea and we're going to have a look at the Instagram application that we developed with the with riverpot in the riverpod course and we're going to convert some of the available providers to use code generation let's just get started without further Ado and start jumping into converting our providers to use code generation so as I mentioned at the beginning of this video River pod code generation is an optional task to do after having completed the 17 hours riverpot course which I've placed on my YouTube channel if you can't find that video please have a look at the descriptions of this video and I will link for sure to that video so you can just simply click on it now riverpot code generation makes the creation of your providers very simple providers such as future provider and just basic vanilla provider a little bit easier as you know the syntax we're creating a provider is just using a simple function but you have to just say final something provider is equal to and then you say future provider of something something and of course if you have for instance a family provider which we do in our 17 hours riverpot course then the syntax gets a little more complicated as well because then you have to not only specify the return value of your function but also the input type typed here provider twice co-generation for riverpot makes it a little bit more easy for you to create those providers it doesn't unfortunately have support for some providers yet for instance we cannot have code generation for stream providers or state Notifier providers which are actually the majority of the providers that we're using in the 17 hours riverpot course however we do have some vanilla providers as well which we can go ahead and basically take advantage of code generation so without further Ado let's just bring our project to the screen and start looking at riverpot code gen which is the plugin that we're going to use in order to generate our code so I'm going to take the visual studio code pretty much the the way we left our application so this is how we've left our app and I'll see if I can bring up the simulator as well so this is the iOS simulator and if you're watching this video on Linux or Windows then you will have probably your Android emulator or you will have an Android device connected to your computer so it doesn't make really any difference as long as you finish the 17 hours riverpot course then you can be here regardless of which computer you're using ask code gen Works basically on both on it will work on Windows Linux and on Mac OS of course so the uh the core of code gen for riverpod is using a plugin which is called riverpot generator so I'll bring up pop Dev in here as you can see it is called riverpod generator and there are some examples of actually how to use it so you can see for instance here is a marking with River pod so this is something new that the code gen The riverpod annotation Library will bring with itself and you can prefix your providers with at riverpot and instead of creating a function with final my something something provider is equal to you can simply create a function and this internally the code gem will create a provider for you which takes care of even the family input parameters as you can see in here so you don't have to specify family anymore as soon as soon as you have some required proper sorry required parameters to your function this immediately becomes a family provider as you can see in here it becomes a future provider simply because it's returning a future it will become Auto disposed and will also immediately become a family provider and then inside this function you can just do your work as you do with any other async function or any other function that returns a future which is marked as async so we're going to use this guy there are some um there is some work that we have to do in the beginning to set it up but that work is explained right here so let's go ahead into our project and and basically get to it I'm gonna get rid of the some of the bars that we have in here so we can focus on our terminal okay so as you can see in here we have some dependencies we have to bring in a river Pot and also riverpot annotation as dependencies I hope that you can see it on the screen let me make it bigger a little bit so you can see that we have to bring in riverpot and in our project we already have riverpot but we have uh hooks riverpot so if you look at Pop's fakey ammo you will see that if you look for hooks you can see that we have hooks River pot so you don't have to bring in River pot in order to get started with this we already have River pod okay as you can see in here it says flutter River pot or hooks River pod will do as well what we're going to do though is to bring in riverpod annotation so that we can use these excuse me these fun annotations in here to get the code gen working okay so let's go in here and we're not gonna work with our pop speaking ammo let's go and add that with flutter pop add and we say River pod annotation as you can see I'm just going to bring in riverpot annotation to our application and then as you can see we have two Dev dependencies one is build Runner the other one is riverpod generator okay so let's say in here we bring in build Runner first so we say flutter pop add and dash dash Dev very important these two are Dev dependencies they're not like dependencies that are going to be shipped with your application so don't forget the dash dash Dev flag in here so we say flutter pop at dash dash Dev build Runner okay and that's going to do its work then we're gonna go in here and say River pod generator as well so command r or control R and we say dash dash diff so we get to this command that we wrote before and then we say flutter pop at Dev riverpod generator so that's the last dependency that we have to bring into our application to get this all to work okay so after doing that we need a terminal window here in Visual Studio code or if you're using Android studio I hope that you can create multiple terminals in there as well but we need one terminal window open in order to get the code generation working and watching for our changes okay so you can see in here it says Dart pub run and this command could be very confusing for for a lot of people because if you run this you will get an error so what we need to do is to say flutter pop okay and then run this so we should say flutter pub run and then you just execute that command all right and this is going to take some time in the beginning and what this watch parameter at the end does is that now code generation this command is sitting here in the background and it is waiting for us to make any changes to our application which require River path code generation okay but we haven't done that yet so any changes that you make to your application which require a report to regenerate is General code generation or to regenerate the code that it it um it basically automatically generates for us then this uh kicks in again so you don't have to do anything so ensure that you don't close this terminal window okay and in Visual Studio code there is a handy button in here which you can create a new terminal window so you'll basically get one shell in here which is the Watcher for riverpod code generation we're going to leave it just working so please don't close it and if you need another terminal then you can go here having pressed the plus button then you have a working terminal here ready for you so okay so let's just get rid of this in here so the terminal is still up and running no changes to that okay and what we need to do then is to go ahead and convert our first provider to um an auto generator provider and how do we do that because if you if you look for our provider Dart files you can see we have quite a lot however if you see for instance delete post provider it is using a state Notifier provider we cannot convert these at the time of recording this this video using Code generation riverpot's code generation at this point in time does not support generating code for State Notifier providers or stream providers and unfortunately quad actually not unfortunately it's just it's just not so fun that a lot of our providers happen to be State Notifier providers or stream providers if you if you look through our providers you can see that we have for instance is loading provider which actually I think we can convert auth State provider is another one which is a state Notifier provider which we cannot convert however if you search through our code for equal provider you can see we have three of those vanilla providers which we can convert and also we have I think a few future providers as well future provider or maybe we don't yeah actually we do uh equal future provider so we have two future providers and three vanilla providers which we can convert to using Code generation so let's take it one step at a time we're gonna say equal provider and find our three providers in here the first one as you can see in here is called is logged in provider so let's get started by converting our first provider to code generation there are three things that we need to do here actually there are a few things but three key things that we have to do first we have to import The annotation library in here so let's say import and then look for annotation and import riverpot annotation in here okay after doing that we need to say part and then you take the file name it says is logged in provider okay we say is logged in provider is and actually a GitHub co-pilot is trying to help so I'm going to allow it to help but in here we say is logged in provider so the name of the file and then dot g as in generated and then dot start okay so you need to write it I completely understand that we're getting an error at the moment however this error is going to go away soon so you don't have to worry about that so much okay and when I say it's going to go away soon and what I mean is that as soon as I press command s or if you're on Linux or Windows and you say control s this file is going to get saved then this little guy here which is watching code changes is gonna kick in and it's gonna Auto generate our provider for us for us and this file will then be generated so this error will go away okay but before we do that we need to go ahead and Mark our provider as being a river pod provider in here okay so after having done this we need to go ahead and look at our provider and see okay what is this guy actually doing it's basically watching changes to a to our ref and then it's watching changes on auth state provider okay so how do we convert this guy the first step is to see okay if this is a this is a vanilla provider then you need to make sure that you just take this Boolean parameter or whatever this provider is returning and then place it in here and say this returns now a Boolean okay so and then this the name you also have to change so it says is logged in provider you need to get rid of the provider from the name so first put the return value first as in turning this into a function remove the name of the change name and remove the part that says provider so it then says is logged in okay and then turn it into a function and in this case we need to have a look because this provider does not is not a family provider meaning that it doesn't have any parameters it only has the ref every provider that you use using Code generation will have its own ref passed in and the ref will be called it will be this it will have the same name as the function as you can see in the documentations and if you look in here this documentation in here says the provider is called Fetch products so it doesn't have the name provider in it and its ref will be fetch product ref actually it should say fetch products ref I believe so that's a little bit of an error so in here our provider is called is logged in so its ref will be called is logged in ref so let's just write it is logged in ref and then we say ref okay after having done that let's get rid of this syntax that we have from before and make sure that this is a proper function at this point you can see that we have two errors and I'm now going to press command s on MacIntosh and Ctrl s if you're watching this on Linux or Windows so code generation is going to kick in and we can go back to our code gen and actually have a look what happened in here you can see starting build and that and then it basically generated our G Dart file in here so if I command and actually a hold down command or a control on window windows and Linux and click on this you can now see you have this generated file in here and it says is logged in provider which is an auto disposed provider okay so this is this is exactly what we need to do and you can see in the problems tab there are no problems basically that we have to address so everything is going to work exactly as it did before so your application is just going to continue working as it did before and if you search for is logged in provider in your application you go actually somewhere I think we're using this is logged in provider rnp I wish we did is logged in is logged in here we're using the auth state provider perhaps here we could actually say is logged in okay so in here we can actually change this guy is logged in and we say we ref watch and we say is logged in provider mm-hmm let's see if we can change this and we say is logged in like this provider like this and we say when we watch it we just get a Boolean value basically we have two problems in here so let's see what happened we have unused Imports so let's remove these imports from Main Dart file okay and I'm just gonna hot restart our application and bring up the simulator let's just test that our logging in it's working now so let's remove this sorry let's log out of the application and I'm going to log in with Google let's see if it works like this and if that works yes you can see now that we're logged in we're thrown into the main interface of the application so we can say that this change actually worked so is logged in provider is working successfully and we change that little bit of a complicated code in main Dart file as well and to go from this is logged in sorry to go from off State provider now we're just simply watching is log name provider which is basically doing the work for us so this guy is actually looking for changes inside um our auth provider right so if you go in here is logged in provider this guy is looking sorry it's looking for off State provider changes anyways for us so the account the complicated code is inside in here and it shouldn't be in main Dart file okay so that was our first provider that we converted to uh riverpot code generation let's look for the other two so we just say equal provider and then we have this user ID provider which is actually a little bit more complicated you can see is it though no it isn't it's not this provider that is complicated because I I think none of these vanilla providers are actually complicated because they're not family providers meaning that they don't actually take any parameters in the future providers that we have inside our application could be a little bit more complicated because they do have parameters that get sent in meaning that they become family providers so let's go ahead now and convert the user ID provider which I think we are actually using yes in quite a lot of places so we have to be careful how to do this otherwise we can mess up the rest of the code but to be honest with you this provider is also very simple so if you follow the recipe that I gave you I don't think we should have any problems so let's say import let's import The annotation Library riverpod annotation then we say part then we say this is a part of user ID provider sorry the name of the file basically is called user ID provider so write that then we say dot g dot Dart then we say that this is a riverpod uh basically it's annotated with rubber pod in here at riverpot then you need to look at the data that this guy returns it is an optional user ID then you go and remove Final in here and instead put the return value removed it name Provider from the name of this function so it just become becomes user ID then the ref will be user ID provider ref actually user ID ref I think is it is called okay not the provider user ID ref and then we call the parameter ref remove this part and ensure that this becomes a proper function so meaning that we remove these things from here the semicolon and I'm just going to then press actually sorry this is an arrow function I can see in here so we've got to be a little bit careful so let's make it an error function like this semicolon like that all right so we have two errors in here and um I'm just going to press command s on my computer so boom and you can see the errors just went away so by doing that okay now it says name source files using lowercase with underscore it is complaining about user ID provider dot something and I don't actually know where this guy is coming from um the editor could not be open because the file was not found okay well that is good that it can't be found because we don't have such file in our application let's see we have the user ID provider.dart and we have a user ID provider.g.dart so that problem is really nothing that we have to worry about because this thought doesn't really exist in our application maybe it's just Visual Studio code that is gone crazy a little bit so if we've done everything correctly then we don't have to worry about making changes to our application using these plain vanilla providers because you can see we've converted this to generated River pod provider and nothing else had to be changed in the entire app so you can do a hot restart of the app and everything should just work as it did before so commenting and liking all of that is going to work and commenting in here we have Hello World some common common three and here that also works as expected let's just delete the comment to see if that works as well yeah good so that was uh our other provider basically okay and now let's search for another provider which is the last one we have to convert let's go in here which is is loading provider it looks it looks quite scary but it isn't really I mean there's not so much to do we have to follow the recipe so import and then we say annotation in here okay River pod annotation and then we say part and it is called isoluting provider.g.dart then we go in here and we say this is a prefix with riverpot in here and we look at the data type in here it returns a Boolean so let's change the function to a bull remove Provider from its name create an actual function and then you say is loading ref so the name of the function plus ref okay and it should be in this type of casing basically and we turn it into an actual function all right and the and we call it ref of course and also remove these on unnecessary characters from there so I'm just going to press command s and all those errors also went away if we look at our problems it's still using is still showing this uh problem in here which we actually don't have this source file doesn't exist I don't know why it is complaining that we have to create it I mean it's complaining about a file that doesn't exist and it asks us to actually create it um and it's complaining about its naming I mean if this file doesn't exist why should you even complain about its name um good now we've converted is loading so we don't have any more providers that we have to convert however we have future providers and these are a little bit more juicy actually so let's go into thumbnail provider and have a look at this guy how we can convert it you can see we have uh it is an auto dispose and the auto dispose part you don't have to worry about but the family part we need to ensure we take care of okay so this is a family uh provider meaning that it has an input parameter and its input parameter is a thumbnail request if you look at the documentation you can see for family providers you need to make sure that the input parameters are required named parameters okay so let's go in the coding in here and follow the recipe again so we say we import annotation in here riverpod annotation and then we say this is a part of thumbnail provider dot g dot g hasn't generated okay then we say this has a prefix of rural pod as you can see in here then we need to have a look at its inputs and outputs this guy is a future provider so it needs to return a future okay however what future does it at your return it returns an image with aspect ratio so let's say this is a future of image with aspect ratio then its input is a thumbnail request okay and as you can see inside this function this request is actually called thumbnail request and its name is request so let's copy this part and let's go in here and say we remove the provider from its name then we say thumbnail ref which is the ref then we create a required parameter which is called request as you can see in here okay so that is all you have to do in order to turn this into a family provider using riverpot Code gen then let's go ahead and remove all of this that we have in here and remember this is an async func so let's keep the async as part of it async like that and in here we need to do some cleanup so let's remove that and this so now we have a little bit of a problem with the code gen of course and that is because we haven't saved this file yet okay so I'm just going to press command s on Macintosh or Ctrl s on Windows and Linux and you can see those issues just went away just like that all right however with future providers you need to be a little bit careful because it seems fine now however if you look at your problems tab you can see you have two more problems now and these are serious problems because your application is not actually getting built what happened in here since that is because we turn this into an auto-generated River pod provider which is also a family provider we need to ensure that we passing this request parameter in here into this function using its name up to this point our family providers have had kind of like at call site we were just passing the parameters as simple arguments without names however since they have names not the required named parameters we need to go ahead at call site and ensure that we're saying that the parameter is actually called request so let's go into these problems that are popping up here one and they're both actually in file thumbnail view it seems like it or maybe it's just one so let's go in here and say thumbnail provider now has a parameter call request just like that and you can see the issue just went away so we just had one problem and that is fixed now so I'm just going to hot restart the application and this is in file thumbnail View and if we've done our work then uh actually thumbnail when image aspect ratio file thumbnail View and seems like our thumbnails are working at the moment so seems like our provider is working as expected so we're done with the thumbnail provider as well we have one more provider in here which is a future provider which we can convert to Auto generation has so code generation and it is called like and dislike post provider which is used for this button if you remember the like and dislike button in here okay so let's go ahead and convert this guy as well you can see that it is a family provider as well it is a future provider and we can easily convert it using the same recipe that we did for the thumbnail provider so let's go ahead and say import import if I can spell annotation oops I think I've just placed my finger incorrectly on the keyword so I'm typing everything incorrectly so riverpot annotation is imported so let's say this is a part of this with generation with dot g dot Dart and then we say at riverpot we need to look at what type of value this guy actually returns it returns um a Boolean and it is a future provider so instead of final we say future of bull okay we get rid of the provider from the name and we turn it into a function then we say like dislike post ref this is our ref we have one parameter which is called request of type like dislike request so let's just copy this guy and go ahead and create a required named parameter in here so we say required required and then that request in here okay so that's looking fine let's go and clean this function up it is an async function so let's just keep it like that and then we're going to go ahead and remove these last bits and pieces from here like this and this to me looks fine because we have the usual suspects in here that are causing our application not to compound that's just because we haven't saved this file yet so I'm just going to press command s on Mac or control s on Linux and windows so there we go those arrows just went away okay and now we have the same problem as before in that we have to go to the call sites of like this like post provider and ensure that we're passing the request named parameter in here okay like this okay and let's go in here and say now this parameter is called request good stuff after doing that yeah I'm gonna hot restart the application just to ensure that everything's running fresh okay and debug console no outputs in here let's go ahead and like or dislike a post and see what happens and you can see we can like and dislike posts as you would expect so that really concludes this video for us because at the time of recording this video we cannot go and convert our many other types of providers to Auto generation unfortunately like stream providers which we have quite a lot of like if you search in our app for stream provider you can see that we have quite a lot of stream providers they cannot be converted at the time of this recording and States Notifier providers either so but I hope that this video at least gave you the idea of how River path code generation works on how you can apply it to a real application real functioning production level application so what you can do is to apply the same principles that we talked about in this video for stream providers and state Notifier providers as well in the future when they are supported so I hope you enjoyed this video and I hope to see you in the coming videos and if you have the means to support me by saying thanks pressing the facts button at the bottom of this video I'll be forever grateful so hope to see in the next videos and hope you enjoyed this one

Channel: Vandad Nahavandipoor

Views: 7,860

Keywords:

Id: mYCGdogbuH8

Length: 30min 59sec (1859 seconds)

Published: Wed Oct 26 2022