Firestore CRUD with Flutter

[Music] folks welcome back to the channel we have a kind of a long one today but a very important topic which is fire store credit operations lots of videos out there that are shorter maybe you should watch those first but in my video I'm going to dive into three of the things that I think are very important to build a large-scale app with fire store crud those are a good model a good service and a good state management system and we're gonna use provider change notify our provider as their state management system in this one will keep the intro short because there's a lot of content here so get yourself a big cup of coffee a nice comfy chair and let's get started alright step one is to get yourself a fire based project if you do not have one already so if you don't I'm gonna use one that I use for a lot of my coding demos but if you don't you can click on add project you're gonna get a question about whether you want to enable firebase or Google Analytics you can decline that at this time and you will get yourself a project step two is to get yourself a database so once you have your project you can click on database and by the way I have the Blaz plan here it will probably default you to spark which is the free one and that will work just fine for this tutorial I have blaze because I use this for other tutorials but spark is perfectly adequate for this tutorial and is free so that's the one you want to go with database when you click on database the first time you do that you're gonna have an option to create a cloud fire store database you want to click on that it is going to ask you whether you want to start your database in test mode or production mode pick test mode because that will create rules that are completely open if you created a one that's in production and you want to change the rules you can change the rules by clicking on the rules tab change it to what I have here and that will make it basically open for you and we don't have to worry about permissions as we go all right with that done we want to create a project that we can start to float a project that we can hook to our firebase projects so let's go to a terminal and I am going to create flutter or type flutter creates firestore underscore crud alright and let's open that with code if you have that in your path you can type code dot and I'm gonna do the dash are the flag for a new window and I didn't change directories before I hate that all right let's do CD firestore crud now we'll do that firing on all cylinders today here we go excellent alright so we want to set up Android first and let's start with the package name so the package name is going to be an Android app SRC main Android manifest and they'll give you a default one you can use that if you have any ambitions of changing that down the road should probably do it now it's gonna be easiest if you if you start your firebase project connected so leaving leave yours as is I am gonna just demonstrate how to change that I'll go to come dot Julho dot fired or underscore crud is what I will call my package and that is all set there and then for the iOS side you're gonna want to open Xcode and you're gonna want to open your project so you go in there you've got a flyer store crud you go to iOS and you're gonna want to open the XC workspace file and under runner you will have your they're gonna call it a bundle identifier same thing as the package ID for android so whatever you changed it to in android you want it to be the same for iOS and leave Xcode open we're gonna need it in a minute so once you have that set you're ready to link this project to firebase and there are a couple different instructions out there I prefer the one on firebase so when you're in firebase if you go to go to Docs you can click on either get started with Android get started for iOS it doesn't matter because we're just trying to get to a page that has a menu down the side that has this option of use firebase with a framework and the flutter instructions are there and this starts pretty high level it'll actually ask you to install flutter SDK all that stuff create a fire based project so you could walk through this and kind of make sure you have all the the boxes checks before you get going we did all this so we want to come and register our app with firebase up at the top here we've got some chips so I'm gonna start with Android so register our app with with firebase this is the step we're on so we want to come back here we want to go to project overview okay so we want to add an app let's start with Android and this is where the package name goes so this needs to be 100% consistent with what you have here in your Android manifest so I'll copy I'll paste that in here and the rest of this is optional you can give it a nickname this is for the signing certificate for Google sign-in and some other advanced features of firebase you can come back and add this later if you need it so will click register app want to download my Google services JSON I just like to look in my download directory and make sure I don't have some kicking around from my last download which I do and if you do you're just gonna get a one you know like a parentheses one version and you can sort that out from there but I'll get rid of them OOP meant to click download there we go and so I get this Google services JSON and I want to put that will say right here actually blanking on where that's going to go that firebase config file we want it an Android app so Android app right there so come down below this build that great file the Gradle file let's just refer back to the instructions so we have some requirements for our root level build.gradle we need to make sure we have this Google dependency in repositories we need to make sure we have the Google dependency in all project repositories down here and we need a class path dependency so I'm gonna copy that we're gonna look at build that Gradle actually this one here app level so I see we've got Google under the build script repositories I see we've got it under all projects we're all set there but we don't have this dependency here so we'll add that in and so I got this right out of here all right and then in our app level build that Gradle which is here it would like us to make sure that we are applying this plug-in right here so let's grab that look for the apply plugins so here we are add that and then the last step is to add flutter fire plugins that's a step last step for iOS as well so let's skip to iOS for now and then we'll come back and add those plugins before we launch the application so we can flip our chip over to iOS and we want to come back here we can skip through all this continue back to the console we have an Android app we want to add another app that'll be an iOS app and so we need to make sure that this is exactly the same as our package ID so I'll just copy it from Xcode just to make sure it's 100% the same click register app it's gonna try to walk you through some steps here you do not want to follow them these are for a native platform so at this point we want to download this Google services info.plist and skip back to our flutter instructions so we have registered our app with firebase we just did that now we want to add the configuration file and it says we want to download the Google services info.plist which I just did and we want to put it in using Xcode we want to put it in runner slash runner so we'll pull up Xcode and we will open my there we go we'll put this runner slash runner finish and at this point you should close Xcode because when you fire up the emulator the Xcode is gonna start to get confused about the changes that are being made outside the emulator so go ahead and close it quit Xcode no longer needed and we're at this step of adding flutter fire plugins which we were at with Android as well so let's do that we're gonna go to pub dev and we're gonna search firebase underscore core and we're gonna grab that will grab the installing tab will grab the dependencies and we will take that to our Android or excuse me pub spec gamal so I'm gonna close android and iOS tabs at this time we'll go to pub spec dot yeah mol and we will add firebase core right after Cupertino icons and the other one we want is Phi restore I'm just going to search fire store cloud fire store cloud underscore fire store go to installing grab that dependency if you can put it in pup spec that yeah Mille and since we're here I want to grab provider as well we're gonna use that so we'll go to provider go to installing grab that and one more I want to grab UUID and this is what we're gonna use to generate a unique ID when we input a record into fire store so again go to the installing tab grab the latest version and paste that into your pub spec gamal hit save let vs code to its import and we are ready to start the application so don't be surprised if this takes longer than you are used to expect used to it taking to fire up your emulator it's got some work to do so I am going to go to Lib main dot dart start debugging and then I'm gonna hit pause while it does that alright and we get the flutter demo app in all its glory the important thing we're looking for here is anything in the in the debug console that might trigger the fact that our setup is is incorrect and we don't have that if you are experiencing issues I would definitely go back and revisit this document here and maybe cover some of the steps up here that we didn't just to make sure you have all the prerequisites established before you you start this out all right but assuming you get this far what I think it makes the most sense I mean we talked in the opener about the importance of a good model a good service and a good state management system and if you get to the point where you are comfortable with this it makes sense to start there and work your way up to a user interface but I think for the purpose of learning and syncing and getting this to sink in it makes sense to do the opposite start with the user interface and as we get to an element and do the pieces that we need to do in the backend to make that element work so we can also just kind of check ourselves and make make sure things are working as we go so in the lib folder let's create a screens folder and what I'd like to do in here is create two widgets we'll create one that will call edit underscore product dot dart and that will be our detail screen with the the fields of our model and it will be dual purpose so we can add add a product there we can also edit an existing product and I'm just gonna create a simple product that has a name and a price basically as all they're all there is to it and then another screen it will create so let's create a new file that will be products dart and that's just going to be a list screen of our existing products that we can click on those go to the detail screen and do what we need to do there all right so to get something on the screen let's start with edit product and so this will be a class of edit product and I'm gonna make this a state full widget and the reason I'm going to do that is we are going to use controllers eventually to populate the text fields if the record already exists so if we're moving into an edit and controllers require you to dispose of them when you're done to free up those resources and for that we're gonna want to state full widget I'm actually going to stay extends stateless widget I'm going to do my build and then I'm gonna use Visual Studio code to convert it to a stateful widget to save me from having to type all that extra lie all that extra code if you have a plug-in that does that for you that's great I don't like to install those because I don't want to assume that anybody has certain plugins here so I just kind of stick to the basics for my for my plugins all right so let's do just a scaffold here and we can create an app bar and we'll create an app bar widget with a title which is a text widget that says edit products or edit product is fine all right code format that so let's skip out to our products page here and let's create a class of products and that will extend a stateless widget which we will actually use a real stateless widget it's not just a scam all right and this will also return a scaffold it'll have an app bar it'll have a title and we'll create a text widget that says products all right I'll see if that code format that and also on this page I want a some actions in the header so that I can click on them I'm gonna take this fab icon out because that's that's very material and I'm just gonna put it up here in the header so in our app bar I'm gonna put actions and fferent actions I'm gonna create an icon button that basically does the same thing so icon button icon will be icon icons not ad and I'm gonna make it a little bigger than standard so let's make a size of 30 and that's gonna need an unprecedent is when somebody presses it we want it to go to the detail page so let's do navigator of context push and we'll push a material pager out we'll give it a builder and give it a context goes to edit product and we'll need to bring in any product like so and that should be fine so let's get rid of this main and so we can actually start to see what we did on the screen I don't like to do too much before we actually test it and move on so in main let's take out this big block of green gobbledygook there and class my homepage down take all of that out and for a home page we want products which is our list if I save that I get my screen here this used to kind of freak out on me when you've done that many changes and recently it started actually working and not needing to be restarted but if you have errors at this point stop it and restart it but we've got our products here we don't have any products yet but we click this we can go to edit product and this is where we'll handle ads and edits all right so let's start to sketch out this this edit page so if you're on products let's go to edit products so we can see our work and so you have an app bar let's build a body and let's do a ListView with children and so what I picture here is we'll have two text boxes one that will take the name of the product the second that will take the price and then a button to add the product and a button to delete the product so here I'll do a text field and do a decoration so I'm not gonna do a label I'll just do a hint text so I'll just do product name there and add a comma I'm just gonna copy that paste it down below for our product price both my cat and my dog are snoring behind me I hope you can't hear that so there we go and then we'll do a raised button with a child of text which says save and an unprecendented and we'll create a delete button right below it delete I can do it there we go and we're not gonna worry about a lot of things you should worry about an app like validation here but let's and we're not gonna have a verification on the delete either but at least let's make it look a little scary so let's do a color colors dot red and text color yeah text color colors dot white so at least looks like something we shouldn't mess with unless we're serious about it let's do a size box in between rays button just to create a little bit of space so the height of 20 should do it create a little space there and then lastly just not have it look terrible let's surround our ListView with some padding and would you just leave the default at 8 I just don't want it to sit right on the edge like that all right so we have a really good idea of the fields that we're looking for now so now might be a good time to break from the UI and to actually build our model because we know we need a name we need a price and if we're gonna be putting this in a database we always want to think about having an ID as well so we're looking at three fields in our model so let's build it let's go to live folder let's create a new folder let's create a models folder and in the models folder we will create product art and that will be a class product and so we want to define our fields or our properties up top and so we want a final string and we'll build an ID let's call it product ID and let's do a string we'll call name and then a final double I think will work well for the price and then we need a constructor for the object so let's do product and do a name constructor so I'll do curly braces and we'll just do this dot product ID this dot price this dot name the order doesn't matter since they are named and we can do a semicolon at the end there and that defines our model so three fields a constructor we're not done there we're going to need to come back and do some more work to this to interface with firestore but at least we've got our basic dart object defined now we also have a pretty good idea of what we're going to need for state management and so let's add a new folder to Lib and let's create a providers folder and inside of there let's create product underscore provider Dart so this will be our back-end code and we will use class product provider and we'll use with change notifier which needs to be imported from material dart and we will want to pretty much mirror the properties that we have in our model we want private variables for each one of those so we'll have a string that is underscore name double that is underscore price and the underscore is to keep it private that's the that's the marker in dart for a private variable and a string that is underscore product ID and we'll want some getters and setters so we'll do some getters here our string get name goes to name and a double get of price will expose our private price variables so these are the public getters for these private variables and then we're gonna want some setters so we'll want to be able to change the name so we'll get a value of string value and we'll set the name equal to our value and then we'll want to call notify listeners and that way if anybody is listening at any widget is listening to this name property every time we change it they're gonna get the benefit of that change if you don't you forget to call notify listeners they won't get it and you'll be frustrated as to why that's happening so we'll also change price and this will take a string value so we're gonna hook this to the text field and the text fields every time somebody types in them back here we're gonna add a function every time somebody text in them types in them we're gonna pass the value back to our provider and that's gonna be string everything from a text field is a string we want to double and we can make that conversion here so we can say the price is going to be equal to double dot parse value and don't forget notify listeners and we'll come back here and do a little bit more work as well but we now have you know we now know we're gonna need a name and a price in some way to get and set those and so we have that now so let's come back here to our edit product and I just mentioned we're gonna hook these text fields into our provider so let's do that now so on text field there is a unchanged property and we're gonna get a value every time the text field is changed and we want to call our provider and call the change name or change price function every time that happens all right so to do that we want to bring in our provider so let's come out and put our provider in the widget tree so let's come out to main dot dart and what I'd like to do is use provider to inject that provider the use provider to inject the provider that we've created into the widget tree so that we can can then call it downstream in our edit product page so let's use vs codes wrap widget and we're you're gonna set up a change notifier provider it's part of the provider package we are going to create user context and we are going to use our an instance of our product provider like that and I need to import provider so let me do that alright so what this does is it's going to create our product provider an instance of our product provider it's going to pass it into the widget tree just one instance of that product provider and it's going to be accessible in the widget tree from anywhere below that anywhere below the main dart which is everything so our edit product page is going to be able to come inside the build method and we are gonna be able to bring in our product provider because it's going to be equal to provider which will need to import dot of context and this is a generic so we can tell it we want an instance of our product provider and I need to import that as well there we go okay and restart the state if you got that error just restarted we're doing too many things and the the state got confused all right so here in our on change method I can call in product provider change name and pass it that value and then I can come down here and do the same thing for changed price and if you prefer this syntax you can do that as well here just keep it all in one line instead of the curly braces alright so in theory when we come here we type something we are passing this to our back end and it sure would be nice to confirm that so why don't we hook up the Save button to something that at least tells us that we have done that part right and since I've kind of organized my backend code into my product provider for products go ahead and add a save function to product provider so I'll come down here before the class closes and I will add a save product function and I don't need to pass it anything because we have the variables up here and hopefully they're populated so let's just print just to name let's do yeah well do name we'll do a comma and then we'll do price all right so if I click Save there um we need to hook that up so I've got to the saved products but I need to actually put it on the raise button so we've got a blank function here let's do product provider save product now let me try that and there we go so we get apples and we get 25 so that is working so next it would be nice to actually send this to the database so that we know that that part is working so let's create a service now so inside a library folder we will create a folder called services and inside there we'll create a file called fire store underscore service dot dart and it will be a class of fire store service so here we want to bring in an instance of fire store so fire store we'll call it underscore DB and that is going to be equal to fire store not instance and I'll need to bring in fire store like that so that's a reference to our database and so the first function we're gonna need in our service to interact with fire store is a safe product so that we can actually pass that product that we just created here to the database so that'll be a future it'll return a void we'll call it save product and we'll pass it our product object and we will do DB dot collection and so the collection that we want to create or use throughout this is called products and you can add directly to a collection you will get an auto-generated ID and I don't like to do that I like to use a different syntax where you you give it a specific document and this winds up being an cert product product ID will do set data and this is where we pass our product not in that format but what we do here is the set data as we give it a document ID so we'll create one in our provider before we call safe product that'll be a unique identifier that it becomes alright ID that also goes in the record and if that document exists it will update it if it doesn't exist it will create it so this saved product I didn't put insert product and update product I put saved product because it will do both all right we have two problems here one is that product hasn't been imported yet so we can take care of that the other is that a dart object is not what the firestore database is looking for they are looking for a map and so we need to convert this from an object to a map and the best place to do that is in our model so let's create a helper function that will take care of that operation every time we need to do that for firestore alright so coming back to models product dart we want to turn our object into a map so let's do map type string dot dynamic and we'll call to map and we will return this nice little map we create we will tell it the firestore prod property that we want to create and the dart object that we want to create or the dart object property we want to create so that's product ID we have name and then we have price our naming convention for dart and fire store is exactly the same it might be different if you wanted to so you could just map you know if you had product underscore ID and fire store you could map that to product ID in the dart object like that if you wanted to we have them all the same all right so that takes our object turns it into a map so that we can then just call to map on our product and lastly we just need to return that and let me just widen that that is our call to add a product and also update a product in fire store all right so now that we have that lets go back to our provider and we created a save product function and we just had it print but let's actually have it add to the database so in product provider let's bring in an instance of our service so we'll do final fire store service is equal to an instance of fire source service with a capital and we'll import it and we'll spell it right and we'll stop hitting enter for no apparent reason there you go I'm worried about myself there okay so we can create fire store service dot save product and this is where we want to pass it a product so let's come up above here and just create ourselves a new product a variable so that's gonna be a new product it's gonna have a name of name here it'll have a price of price and it will have a product ID and this is important because we want to control this so that we then have we're able to put it in the record so that we then have the reference to the document to be able to retrieve it and get it later and this is why I wanted to use the UUID package Wiens why we installed that at the beginning so let's create a variable up here that is UUID and that's just gonna be equal to an instance of that UUID package or the class from the package and our product ID is going to be equal to uu ID and then we're gonna do we'll do v4 slightly different formatting for each one of these you can check the documentation if that that matters to you but will do will do v4 will import product and then pass it a new product they're following it up with a semicolon whoops my emulator stopped let's restart that right so in theory now we hit this we should be able to add apples at a dollar 25 hit save and pull up our database and if you're sitting on the database when you first add a collection you're gonna have to hit refresh after that they will dynamically add in front of you but there we go we got apples dollar 25 the ID that we created though the UUID package created is here and it's also the reference so when we need this document we could just pass the firestore and a reference to this document and it will get it very fast it doesn't have to search for it all right so let's just add a I just to notice it didn't actually close the screen when we hit the Save button there so let's just add a pop here navigator context pop good all right so when we come out of here we know we've got this record in our database but we're not seeing it yet on products so let's actually display the products here so we can take the next step of clicking on them so that we can update them and for that we're gonna need to go back to our Clara store service and we need to write a getter for all the products and that is going to be a stream and we are gonna make it a stream of type list product so make sure you get two closers there call it get products all right and this is a long one so let me stretch this way out here but basically when a reference our collection which is products and when we do that we can get a future by calling get documents or we can get a stream by calling snapshots and we want to stream so let's do snapshots and then let's map that we'll call it a snapshot object and that snapshot object will create will contain a collection of documents we want to map those documents to a document object and the document object creates data that contains data that is a map that we can then turn into our object so that's where we want to go now we don't yet have a method for taking a map and turning it into an object we have a method for doing the opposite taking an object and turning it into a map so we just want to revisit our model and do one final thing okay so let's go to models let's get a product out Dart this is our to map so let's get a from map options so we'll call that product dot from firestore we'll pass it a map with string keys and dynamic values and we'll call that firestore all right and we want to go to the next line we want a colon and we want to start mapping our dart properties to our firestore properties and they're all named the same as their their dart equivalent name will equal firestorm our firestorm bracket name price and when you're on the last you do a semicolon all right so now our model is equipped to do that so if we come back to services fire store service we can call that so we can do product dot from fire store and pass it a map which we have here if we do document dot data and that with a semicolon this is going to be a collection but not a list so we want to come outside or inside the last parenthesis and cast it to a list and then lastly we want to return all that so let me expand that for ya I know that's big you could create a collection or a reference variable to kind of shorten take this part at least and shorten it a little bit but we take a collection of our products we take the snapshots we get from that products collection we map them to a snapshot object we get all of the document objects that are on the snapshot object we map each one of those we collect the data from that document and we pass it to our model and we create a dart object from it all right beautiful now we want to bring this into our widget tree and this is where another instance where provider would come in handy provider can establish that stream and then we can reference it or get a reference to it at any point in our widget tree and so if we come up here to Maine dot dart we could wrap our material app we could create another wrap of our material app and get a stream provider that would allow us to access that stream or we can create a multi provider here with a provider's property and an array of providers we can re-establish our change notify our provider by putting this back in there and now to that array we can add our stream provider which will be the get products call from our service so let's bring in the service so inside a build we want a final firestore service and we will create an instant seller firestore service so that our stream provider and be create context and we will give it fire store service get products and now that stream is there anytime we want to use it in the app we only call it once and then we can reference it at any point throughout the application which in this application is going to be a pretty minimal amount of times but in a larger application you establish it once it's always there when you meet it all right so if we go to our products inside screens and we go to our products I'm gonna shrink this back so we can see the emulator again inside of our build we can bring in our stream so we can say our products is going to be equal to provider dot and we'll need to import provider provider of context send me : there and then you tell it what you're looking for and what we're gonna have is a list of products so it's going to resolve the whole stream part for us we don't need a stream builder in here provider is going to take care of that and we're just going to get a list of products my auto import has been a little slow lately alright so down here below our in our app bar or below our app bar we want to create a body and let's check to make sure products it's not equal null and in that case we will I'm all over the map here this is where we'll give a ListView and we'll do a ListView builder and I'm gonna move the move that question mark down here and then I'm gonna move item builder down to and tab it over a little bit so let's do item count products lengths so we'll do as many many tiles as there are products and then our builder will be of context and index and then we'll give curly braces and we will return a list style so after my builder I still need to come up with an alternate so if the products is not equal to null then we're building the list otherwise I want a circular progress indicator so as this is loading we'll get a circular progress indicator and I am going to center that not a column rapid Center there we go all right then for my list tile we'll keep this pretty simple let's just do a title which will be a text of products index dot name and then a trailing of text products index dot price we're not gonna worry about formatting dollars and all that stuff and I got Product ID and I'm man price and I'm gonna cast that to string there we go and so ideal behavior would be that I click on this it takes me to the detail screen and it's all pre-populated and I can edit the apples price or the spelling of it or the give it a different title or whatever so to do that we want an on tap method and we want navigator dot of context dot push material page route builder context and we'll send that to edit product I should have just copied this up here save that do a little code formatting click here and there we go I go to edit product we're not yet loaded with the products on the page so let's take care of that next so if we flip back to our edit product page in screens one strategy here might be to pass in the product that we're dealing with from the list so we're clicking on a product here we know what it is and we're calling it so when we call the material page out we could pass that information or the product object right into this widget and then we could populate this screen so to do that we would need a constructor so if we come up here to the top we want first of all we want a variable to pass in so let's do product of product and so we pass in our product but remember we want to be able to use this as an ad form and an update form and so if we're adding we don't have anything to pass so we want to make this optional so we use square brackets for that and we say this dot product and now you can optionally pass in a product and emulator keeps crashing let's start that again so if I come back to products now so I go to screen I go to products when I call this product at a product page from the list view I want to pass it products index products lower case there there we go so now in my edit product page if I have a product I'm updating and if I don't I'm editing and we're gonna need to do some work down here in the code to update the way we handle that situation when the page loads all right for starters we want to bring in a couple of controllers and so we'll do a final named controller and that is a text editing controller we'll do a final price controller also equal to a text editing controller and I mentioned that we're doing a stateful widget because whenever you use a text editing controller you do need to dispose of that so let's create a dispose method and take care of all those all right so now we need a little logic if we have a product we want to preload the product details to the text field and so in a stateful widget and it's state would be a good place to do that so we only do it once so we'll do an if statement and we want to know if our widget dot product equals null because if that's the case this is a new record else it's an existing record and if it's a new record we want to set the controller's dot text value to blank strings now that's the default value but if you remember we use in one page we're recycling it if you go out come back in with a product you're editing you go out and you try to add those values are still in there may still be stuck so we want to actually clear out the text fields if they have values in them so we will do price controller dot text equal to that alright so then if we do have a product that we passed into the widget then we want to set name controller dot text equal to widget dot product dot name and we'll set price controller dot text equal to widget that product widget product dot price come on now to string all right so that takes care of setting the text fields when you enter the page so you can see that works okay we're populated but the backend data the provider has not been updated all you've done is set the text fields now when you came in here and we added a brand new record we didn't have to do that because as we typed this function right here on each one of our text fields updated the provider and kept everything in sync now we're not getting that benefit when we are just dynamically populating the text field with code so we need to also let the provider the backend code know what the new values are so down here in the update case where we do have a product that we passed in we wanted to call a function on our provider that updates those fields so let's create that first actually so let's go to product provider and below change price let's do let's do load values and we will pass it a product and we will just go through each one and set our underscore a private variable equal to its equivalent in product so product name is the same as name price is the same as product price and product ID is going to be equal to product dot product ID all right so when we call that we pass it a product we're gonna have all our back-end values we'll be in sync with our form field right here so let's call that we built it in our provider so we need to bring in our provider like this except you will notice that we have no context here to actually pass to provider but the way you can get around that in a stateful widget is a little hacky but anytime you're in an an it state or a dispose method and you need the context you can do that by creating a new future dot delayed with a duration of 0 comma parentheses create the function semicolon there and you will get a context inside here so you can bring this in here paste that in there and then you can call product provider load values that's what I called it right yeah and we will pass that widget dot product and this when you come into this page this will update the controllers and this will update the state all right now when I do this and I leave and I come out it's gonna bark at me down here and it's going to say something like it is unsupported because may pointlessly rebuild the widget associated to the event handler when the widget tree doesn't care about the value now provider and dart is smart enough to know hey this is an init state method we call it once and then we're done why is this person wanting to sit around and listen to this product provider and we don't and we have an option here to pass in a second argument when we bring in our provider to say listen equals false and if I do that I clear this error and I come back in again I get the value I don't get the error all right so this does not this gets basically uses the product provider as just a class reference and it's not going to listen to it like our provider down here is in our build method where we do want that going on so this updates the the product if we pass it a value so if we're clicking on something it's going to pass apples it's going to pass the dollar 25 it's gonna pass the product ID now that's stuck in our back-end code in our provider so if we were to click on add all that is still there so what we did here we want to do again for add but this time we don't want to pass it that way we just want to pass it a blank product so if it's an ad we want to clear out the ID we want to clear out the name we want to clear out the price from the back-end logic and let the users start to type and then let our UUID determine what the new user ID will be all right so if we give that a test we pull this down we go into apples we update it to a dollar 26 we hit save and my fire best consoles being funky but we can see we have apples at a dollar 26 now let me go out and come back in because I want to see this we've earned it alright so there's our product our apples we change that to a dollar 27 we will immediately see it update here in the database bingo if we go to add a new product we are hoping that it recognizes that it's a new product so we're adding pears at $2 and we see a new record with pears at $2 right there so we have our crew we just need the duh to do crud so last step is to delete so let's bring this bring this back up here let's go to our fire store service and let's set up a delete function so that is a future of type void and we'll call that remove product and we will return underscore DB dot collection and our collection is still products we want to grab our document and a removed document we're going to want to pass a string with a product ID that's all we need here we can pass it the product ID and simply say delete all right then we can skip over to our providers product provider here and we will need a remove product function here and that will just be to call firestore service dot remove product and we will also need a string of product ID all right and then we can move to our screens edit product almost there folks we go to our raise button here this is our delete function and we can go to product provider remove products and we can pass it widget dot product dot product ID we also will want to add a navigator of context pop so we can copy that from above all right let's give that a spin so let's get rid of our pairs and they are gone from there and lo and behold they're gone from the database as well so we now have crud operations now we've got some goofiness here for one thing when you go to add you can delete here and that's probably going to give us an error because we have no product ID so we could do something like this widget dot product not equal to null then we'll display our raised button otherwise we will have just an empty container so we could do that that would take care of the Save button there or the delete button the other thing you may have noticed if you're watching really astutely is that there really was no actual requirement of using the provider or the change notifier provider we never actually called any of these getters so there really was no need to to listen for these values why did I put them there in fact you really could have gone to the service firebase service for just about everything that we did a lot of crud videos they do that why did I build an estate management system and the answer is if you are going to build any app of any consequence you are going to need a state management system and so this is a structure that you can build up on for example right now we can hit save when there are no values in our field and it crashes our app so you're gonna need to validate that app and the place you're going to want to put the logic is here in your state management system so when somebody clicks change price you're gonna want to make sure this can parse to a double before you allow it to set to the price here you're gonna want us to actually interfere here too with a try or a catch and throw an error if this is not if they put a letter in the price you're also going to want to hook the button up to something back here in the backend code that says okay this is a valid submission so I can't do what I just did so I think these three parts are very essential to a having that model that can do all these things that we talked about not only set your properties but change your dart object to a map so that firestore can understand it take that firestorm map change it to a dart object so your application can understand it have a very nice clean service that goes to fire store isn't cluttered with things like validation and then have a good state management system where you can store your temporary variables where you can put any business logic that you need to validation saving this business of trying to figure out if it's a new record or a updated record all that stuff can go there so really hope you found this helpful I know this was a long one I know this was a complex one please dive into it parse it as best you can and if you have comments please let me know down below as always thanks for watching if you enjoyed it please like subscribe we'll see you in the next video to focus on if you're gonna successfully work with fire store the first two this is a good model I can't believe there's a mosquito out here freaking April

Channel: Andy Julow

Views: 18,382

Keywords:

Id: YZt92I2V704

Length: 67min 24sec (4044 seconds)

Published: Mon Apr 13 2020