Implement CRUD (Create Read Update Delete) in FlutterFlow for your Web and Mobile app projects

okay hello guys welcome to another video tutorial on how to build mobile and web apps without coding uh in this particular tutorial you're going to learn something really really interesting and that has to do with um an acronym you know called crude that's create read update and delete so uh if at all you are a you know software developer a traditional software developer you write codes to build softwares uh you will definitely be familiar with something called crude which is CR UD and it's an acronym for create read uh update and delete now in every single uh platform or framework that you use in creating mobile applications or web applications you will have to definitely carry out either of those uh individual functions which is either to create a document or create something or to update something or to read something from database or to delete it from database so um I think this is supposed to be the very one of the very first things that uh any uh developer or designer are using no code should learn after of course learning about the introduction to uh no code so if you check in the description below you will see a link to the introduction to Florida flow that I created and if you go through it you will learn more things about flutter flow the pricing the features the documentation and a lot of things that will definitely make you want to learn how to use flutter flow to build mobile and web applications without writing codes so let's head right into our tutorial for today we will be learning how to use to implement the the create read update and delete functionality within Florida flow all right so if you don't have an account also check the link below you will see a link to uh uh create an account with flutter flow just go ahead and check the description below all right but if you have a kind of an account already just go ahead and click on sign in so I'm just clicking on sign in and it takes me into uh uh the Florida flow dashboard where I will see the list of projects that I have available all right and then I will go ahead and start from scratch to create a new project and then from there we will learn crude okay so uh to create a new project you have to just click on this button here that says create new and then I will just click here create new and um upon clicking that the next thing I just need to do is give my project a name so I would just call this project crude all right there's no need giving it a different name so we will we will use a blank template so click here to create a blank template and then um after that you're expected to uh you know click on next step so you click here and then you need to provide a Firebase product ID so that you can completely set up your photo flow products so how do you get your Firebase product ID just go to firebase.google.com after signing into your Gmail account and then after that come to uh Google go to console and then it will take you to the console for your Firebase and then there you will be able to create a new project so you click here to add a new project now Firebase is going to be the the database like where you get to store the information in your project all right so just also call this project crude okay then I'll click on continue and then I will turn off the the Google analytics for this product because it's a it's a practice we don't need to wish the Google analytics resources so just turn it off and then click on create project wait for a couple of seconds and then we will be done creating a project here now when we are done creating this project we'll be able to go to settings within Firebase and then copy the project ID and take it to flutter flow but before we copy the project uh ID we will have to go ahead and add Firebase as an editor in Florida flow all right so let's go ahead and then do it like this so you come here to this icon click on Project settings and then go ahead and just copy your project ID this is your project ID so you just copy it see it here it says project ID you copy it and then before you leave here I know if you you can bring it here and paste it now but let me just show you if you paste it here and click on connect it will show you an error here it says flutter flow does not have access to these Firebase account please add Firebase at Florida flow.iu as an editor it's very important that you have to add Firebase as an editor so you have to come to users and permissions and click on that then click on ADD member and then you can go ahead and add Firebase at floor to flow dot IO okay like that then you go ahead and change it to editor and click on done and click on ADD member you have to make sure that your spellings are correct otherwise you have to delete it and add it again so I think so far so good we are doing fine now when you come back here and click and connect everything should work out fine now so you see the green check here all right then after that go ahead and click on auto generate config files this will allow uh flutter flow to generate some tiny bits of data that is needed to make your application run all right so you know plot of flow basically will be building will help you build boot Android and iOS and web applications so it has some tiny bits of information some data that it needs and since you're definitely doing this without coding you just need to go ahead and turn on auto config on auto configuration Auto generate the config files all right so um then after this we can we don't necessarily we don't want to turn go on to do authentication so there's no need to turn it on and so but we will need to create user collections so we will just turn this on we can always turn this on later if we want to but in this particular tutorial we wouldn't be using Authentication all right so um yeah I think we will be using authentication but if at all at some point we change we can always come back and change it up all right let's see uh let's go ahead and click on initial page here that's uh this is a page that your users get to see of course without signing in if we turn this on we will see this particular page which is for logged in screen uh I think I think we should make this decision right now will we allow that I think we could just allow that let's keep it turned on so that we we can actually still create authentication all right let's uh go ahead and then click to for the entry page we are starting everything from scratch so uh entry page entry page enter page all right so enter page blank we just want to do some basic setup okay so uh here is going to be let's call it Landing maybe landing page or something all right so we go ahead and click on create page and then for the logged in page um okay so now I'm really changing my mind so let's turn it off yes and click and start building all right so we just wanted the tutorial to be for um for for you to learn how to implement crude not for you to create login logout functionality even at all you want to learn that still check the description in the the description under this video you will see a link to that tutorial so all right so um let's go ahead and then let's just call this place crude all right so crude I'd say crude all right so uh this is the flutter flow dashboard for your project all right so and then this particular section is the app bar all right so um the basic thing that you need to do right now is we need to create uh start to implement the create uh read and update uh functionality so how do we create something within a flutter flow so uh let's say that we want to create a a form right so we'll create a form like we'll put some text field here and then uh then we will put some form of submit button and then after that we will uh you know create another page that shows a particular okay so let's do it like this yeah I think that's that's okay so let's go ahead and come to the widget tree this is the widget tree that shows you all the different screens this is going to be the screen for us to put the the form all right so uh let's go ahead and then uh rename this page so I click on this and then come here to let's change it to create let's call this create all right let's call this particular screen create yes so we call this screen create and then let's call uh let's create another screen that we'll call a read all right so it's going to be another blank screen so call this screen read then what will what do we mean by read let's call let's come here and change this to read all right and then this particular one let's not call it crude again let's just call it create okay all right so we have create we have read and then in in in in in a read we will perform the delete uh functionality and then um I think we need to create another screen we will call it uh update okay so update and uh that's it let's come here and click on this and say update okay so basically we have the create read Insider read there will be a button to delete things so that will give us for delete and then we already have here for update okay so let's go ahead and set things up let's first of all try to create something by creating here I mean uh allowing the user to impute some details that you can submit to a database that's when you create something okay and so here we click on the the column section here so this is the widget tree and so you see here this is a column the first one here is the scaffold all right so this is a column we will click on this and then go ahead and create um we will add some widgets inside here so the widget we're going to add here is going to be uh let's go ahead and add a row because inside that row we want to add a text field okay so then we can now duplicate the the row a couple of times so let's add a text field inside so I'll just search for text field and um and this is it we have a text field so our text field is spreading everywhere so uh and we can't even see the outline around it like the the the a border or something so how do you do that so you just screw down here this is a particular section where you get to see the different properties of a particular widget so you scroll down here what we're looking for is the input decoration so this is an input decoration properties we change it from underline to outline and if you check it there's still nothing there right so you click back on the text field and then go to we've changed it to outline but now that outline is more like the border right so but here the Border doesn't have a color it's it says here on set so we need to go ahead and then click on that uh color the Border color and then pick a particular uh color let's use uh something grayish and then there you go we have these now so you see it actually has a border around itself but we need to give some space around the text field because it's spreading across to either edges of the screen so how do we go ahead and give some spaces called padding so you come here add some padding on the left 16 add some padding on the right 16 add some padding on the top or 16 all right then now let's look at it now we can see our text field is looking all good so I'll click on the text field now and of course uh just to make it a little beautiful so you can add a border radius so we can give it eight as a border radius so this is it I just scroll down here everything that has to be the properties of this text field is found on the right hand side here so here we have the butter uh border radius it's all good let's click on it again and then change some few things so what do we want to change let's go ahead and change the the label text the label text is like the title of the the the the the the text field here so let's say this is going to be for our name of the user just name let's say um let's say uh let's just make it a little bit uh detailed so let's say first name okay and then uh we can give the the hint text here say John all right so this is the hind text like what they will see okay so if you click out you see here it says the first name and then example is John all right so let's go ahead and then click on this entire row and duplicate it how do you duplicate it Ctrl duplicates all right so we have another one now a full complete row and it's all good it's all good guys so let's click on this noun and say last name let's change it from first name to that's the second row the second text field so we say uh last name okay and let's change this to do so I think it's always John Doe so here first name last name and uh let's say the last thing we want to put there is email address okay and um yeah we just want to create something all right so let's uh let's come here and duplicate uh these again Ctrl d and then here we go let's scroll down and change it from last name to email you can just write it in full email address and then here it can just be Jean do at email .com all right so email address then the next thing we just need quickly here is just to put a button which will allow us to submit to create to really create creating means are putting something inside the database all right so here we need to go ahead and click on the column the this is the app to add a chart to widgets this is where you click to assess here and then you click on the bottom and then you have this blueish button here so the field color is blue we can just leave the colors like that the width here is 130 let's use our 360. okay so it spreads across properly and then we can give it some padding above 16. and let's go down here and say create all right so guys we'll say create so create here means submit this thing into the database all right so we have a field for create now what do we go ahead and do right now we just need to go ahead and then do something else quite really fast uh we have here the field for first name last name and email address now for you to be able to create this you need a place where you can store it inside and the way it works in Florida flow is that you need to go ahead and come to firestore you come here to firestore and then you need to create a collection so you click here to create a collection you click here to a collection is more like where you want to store these things inside so let's call this place um so what do we let's just call it uh data all right so data or is it data what do we call it uh yeah let's call it user details all right so let's just say details user details um I'd like to keep it all lowercase you can play around it but whatever you write here has to be the same as uh as what it looks like you're trying to create a user collection would you like us to populate uh no tanks no thanks okay so the thoughts I wanted to create a user collection because I used a keyword there called user details so I said no thanks of course I'm not trying to create a user collection I'm just trying to create something that has this uh collection that says user details so click here to start from scratch we need to set up the schema the schema is the this is like the library right so I think we have an error here collection user details currently has no Fields okay sure we're going to have to add some field so now we um we we have a form we have a form let's go back to our form this is like our form right so individually these are text Fields all right so I think the entire thing is something you could call a phone and then we have a button that when they click this is supposed to submit all of these details inside the the database for uh user details right the database called user details and this is called The Collection basically in in Florida flow all right and uh it's also called uh a collection also in in Firebase okay so let's come back here and add uh add the the different fields which is the the first field here is our first first name so you can write it like that first name the data type is a string all right so basically strings are just a combination of text numbers characters so uh first name last name is also going to be a string and then the email is going to be a string as well so you come here and then make it like this all right so you check it so we have a first name last name email now the way it works with flutter flow is that as you created in uh in Florida flow you have to go ahead also create it in in Firebase so we come back to Firebase we go to build and uh here at this point we we're not really bothered about authentication so let's go to fire storage trade so firestore database uh that's on their build so you can see a firestore database we need to turn it on because our our details will be stored inside firestore database okay so in this particular scenario uh we will be using a start in test mode because uh it's a little bit uh complex to set up your security rules for starting in production mode all right but when you want to go live you need to go ahead and then set up your security rules uh eventually we will have a tutorial for this so you can check up later all right so uh start in text mode and then click on next and then click on enable you wait for a couple of seconds it is going to finish provisioning your Cloud file store for your uh projects and then after this we will go ahead and then turn on the we will go ahead and then go back to build and go to storage it is expected that you turn on your firestore and also turn and start it at the same time so I'll do the same thing start in test mode next and done wait for a couple of seconds and when you're done with these two steps then you go back to firestore inside uh inside the Firebase here and create your collection called user details we will do that as soon as we're done creating this default buckets and everything that it's doing okay so um I hope you're enjoying the tutorial already so if you're told you are enjoying it uh please just go ahead and then click on the Subscribe button like the video drop a comment if you have one so I think we run into some troubles here it has to do with maybe a network or something but just click on and done and try it again if it doesn't work just refresh your browser it can always hit some roadblocks like this and that's pretty okay so let's wait for a couple of seconds uh for it to redo this if it doesn't work we will just go ahead and refresh uh okay so let's just wait okay all right um let's see it's setting up security rules it's taking longer than necessary but let's just be patient to watch it to finish its product um process yeah so um I actually consider myself a very patient person but let's do like this all right click and duplicate this okay it's just a smart way of doing things and then um surprisingly guys it had finished creating the storage but it is still looting here so I think it's just Network so yeah it worked okay so let's go to the firestore database and then now we will click on start collection and then we'll create the collection so you give the collection a name the same thing that you used in your um in your Florida flow uh collection name so if we use user details so we use the user details here you have to make sure that it's the same spelling or otherwise you're going to run into some errors so next then click on Auto ID and then put the same the field here the field names that you have here all right so we will go ahead and then put them here uh first name you don't need to put any value if you don't want to we want to do this automatically from when the user clicks on the form like fills the form so here we come to last name and then here we come to um email did we say email or email address we just said email okay so email so here it is the data types are all string string string and that's all good so we can click on save it to create one document so far which we manually created so it is expected that you set up the schema the default schema for it at least one okay and of course you've also created one here uh basically you've not created one you're just setting up the schema here but here this is a real document and let's just have one okay so then after that the next thing you just need to do is let's go ahead and then go back to our widget tree and then start the create uh process okay so how do we create now we create by adding an action to this button that says create so click in here and then come here to this particular section here where I'm hovering at I click on it it's actions so I have to add an action to that button what action am I going to be adding it's called Uh firestore like the action I want to do is in firestore so I click on it it says here create document so guys we have create uh update and delete right so this is the this is where we will do our crude all right I know you've not seen read read is basically for you to query your backend okay so let's say we click to create document it's going to ask us to choose where we want to put this information that we want to create so it tells us to choose a collection so we click here we go to user details all right and then it requires us to set the fields now this user detail has some field so let's go ahead and set it so we already have this field so I'll click on ADD and then add and then add and it finishes so there are no other fields then for the first name here I have to click on it because I need to tell it way to get the data for the first name so I click on that and then I don't want it to put I don't want it to be a specific value right so it says the value Source where is your where is the information that we are getting for this first name where can we get it from is it going to be a specific value are you going to type it here for us all right so uh that's basically what it says here so I don't want to type it here for them I want it to come from a variable so I said from variable and then now it wants me to determine where the variable is so I click on insert and I go to uh widget States so each of the the text fields are all widgets so they have a state that means they have uh that's some that's basically where something can be put inside them so you click on widget State and then you see the different widgets that you have here so the first one here is the field name if you see it's also highlighted on the screen if I move here it's also highlighted it's also highlighted it's really beautiful right so I'll click on the first name here and then that simply means that whatever the user types inside here will be stored in the field name called first name all right let's go to the next one last name we will do the same thing we will say not specific value but from variable we'll click on unset and we'll go to widget State and we'll pick the second one which is for last name all right then we'll do the same thing for email we'll go to uh specific we change it from specific to from variable we'll click on onset and then click on widget State and click uh choose email address and ladies and gentlemen we are done setting up the create process all right but there's something I like doing I like adding a snack bar so I'll click here to open the action flow editor and add another action this was the very first action which is to create this one is just uh something that I want to use to know more like an alert that tells me okay this action was successful so let's go ahead and click on ADD action and then I'll just search here for snack bar so I'll click here snap bar uh so then here in the value I need to just say create uh create um document created so something like that let's say document successfully created so something like that right document successfully created and that's it okay so I will see it pop up here around here and say document successfully created so our none we are done with this process let's go ahead and taste it and see uh How Far We've gone with our create scenario now it can take a couple of seconds so you click on here and then run it it will take like two two to three minutes for it to completely run depending on your machine depending on your network speed and all of that so while we are waiting for it to run this particular step that we have finished instead of waiting for it to like finish before we continue the next thing which would take some a time a couple of minutes so let's just go ahead and then move to the next thing noun or we need to uh uh we need to go to what is it called we need to go to the next screen which is for read the thing that we have created here we can see it except we go to I mean when we finally created and tested we can see what we have created except we go to firestore database and check it so but that's not the idea for making a mobile application users are supposed to be able to see what they create even at all the app is supposed to help them see what they create all right um I'm using a lot of the keywords here because that's basically like the idea so you can understand all right but I'm sure that you already understand where these things can be applied so I have the button here I have to go ahead and click on column here and then add another button so the button here is going to be uh let me call it let it still be 360. and this button is going to be um see user details uh something like that something like that so let's scroll down and change it from button to C uh see uh created documents let's call it like that guys created documents I just want to use the the keywords that you understand so it has finished running the running the very first test so we will check it so hold in a second let's do something around this um here I don't want this to have the feel color so I will click to give it uh maybe white like this okay so then I will go ahead and scroll down I need to look for a a bother color let's look for the butter color where is the Buttercup okay here it is I need to give you the color let's call it let's make the call the butter color blue okay and then let's give it some padding from the top let's say 16. uh why is it like this why is it small button oh this is button padding let's go up a bit and then say 16. okay so like this works let's go ahead and change the text color to uh from white to Blue okay and that's there you go so we have secreted documents so now what is it gonna do when we click on this let's add another action we want it to just navigate to so I click on actions and then click on ADD action I want the user to be able to navigate from this screen so go to navigate to and say uh go to read so the next screen is to read all right so you can create your give your screens different names depending on your project but I'm using the keywords for this particular scenario okay so I I definitely know that you understand what I'm doing I am believing you do because it's really self-explanatory right so here this is how our form looks like we can just go ahead and then create it now this is the application that we just created really simple so this is a create screen so let's just say my name is David all right my first name is David and then my last name is orang okay and then um my email let's just say it's David Arc at gmail.com okay so that's like it uh no gemai no that's not what I meant I meant or Gmail okay so then I can go ahead and click on create so I will click and create something is going to pop up here document successfully created it will last for a couple of seconds then it will fade off good now nothing happens right so we don't know whether document has been created or not right so uh none we don't see this yet because we have not run that new version of it all right so uh let's go to the our database and see this is a new document that has been created and it carries the details that I just put inside now we have successfully implemented one scenario called create okay let's go ahead and then create the the next scenario which is read so we go to read the read screen what we're going to do here is we need to capture the data here all right we want to capture the data here and uh so how do we do it uh let's go ahead and and make it uh how do we do it let's say let's go ahead and just capture the information here like to read it so we'll just read one file now we've created we'll read then after that we will delete and then we'll create again okay like that we'll just be running around it and all of that so um noun let's go ahead and check it out for us to read something read uh read in Florida flow it means query the back end so we will click on the column here and I will go here to where we have backend query you click on it and then you click on ADD backend query so um before we do this guys let's go ahead and just give some places let's let's put some information here all right so by information I mean let's give a placeholder because for you to be able to query your backend you need some placeholders that you will use in getting out the things that you stored inside your database so I'll click on the column and then I'll click in a row I'll click on the row in the row I will add a um okay let's do it like this let's do it like this let's control Z in the column I will go ahead and um let's say uh hold on let me think let's put it inside a um a container all right let's put let's create a container container here let's make the container um 390 okay so it spans the entire screen and then this container let's give this container a color that is not white but maybe slightly like this okay uh it's not so obvious let's go ahead and then give it something a little bit obvious more obvious okay something like this all right so let's give it some padding from the top let's say 16. Okay so 16. now um let's give it some padding uh okay so we have this container um let's go ahead and add something guys I want us to be able to create a list of uh like to be able to read a list of things we will be creating lots of things in the database so I wanted to get a list of it list out of it so let's go ahead and click on here to put something called list view so list view is what you use in creating at least like showing a list of things all right so we will show here list view I just put it inside that inside this list view I'm going to now go ahead and create um what is it called let's go ahead and create a a row yes let's create a row for this and um is it a rule should we do a roll should we not do a roll so a roll a roll a roll okay so I think it's okay like this or should we put it inside a column uh since we'll be stacking it from top to bottom yes yes yes right I think that's the idea let's click on this list View and then add a column inside the list view all right guys good so then we can go ahead and then add a row inside it okay all right so this is basically me going a little bit into design but uh I hope you get to understand it row then inside the row I need to add the text so here is going to be the text for the first name all right so we just say first name okay so I'm just going to go ahead and duplicate this rule let's first of all click on the column and then push things a little bit into the inside so push it inside then click and give it padding on top like this so I hope this is good okay so I'll click on this and duplicate it Ctrl D since it's inside the column it starts from top to bottom I click on first name and change it to last name I duplicated it then I'll click on this particular row again and say Ctrl D and then this is going to be for email all right so we have email alright guys so these are all static things right so uh we want to be able to produce this thing from the the back end like get it out of the database all right so how do we do it that's the way we do reading so we click on the column now and then go to add a backend query um if we do it like that that works but we we're not going to query the column let's query the list view all right because we wanted to show a list of things that we have in the database okay so we click to query the list view so this is a list View and then we will click on the back end here the back backend here basically that's what it is and then add a backend query we'll say query type so how do you want to query it is it query collection so uh there are different ways to read things so I wouldn't really go into detail but let's just use the very first one which is called query collection so you click on query collection what collection are you want to what collection do you want to query okay so we will say user details all right and then do you want just one document or a list of documents so we just want a list of document in this scenario because we use the list view in other scenario would have just put a row and then puts your text inside and then still get just one document okay so you can test that around too and then after that I'll click and confirm and then confirm so um funny enough it didn't produce it the way I am supposed to have it what did I say let's say Ctrl Z click on this uh I think it didn't work the way I wanted it to work did I not choose the right thing list of documents confirm confirm whoa what just happened um okay it's not giving me the details I want the way I want it so um this is the container and this is the list View okay it's not querying it's the way I want it to create so let's go to this container and the height of the container let's say infinite no okay so I think there's a small challenge let's click on this and let me spread this across okay so uh I think this was the issue the container is length is supposed to be expanded right uh I'm supposed to should I use this yes so basically I needed to just turn on the the expansion here to go vertical all right yeah it should have gone vertical so that's just the idea like what that's the mistake I made so um let's go ahead and see uh how we can do this is the entire container and um here we can we can decide to change the color of this if we want but no problem if You observe what is happening this is the first one here and then this is the ones that we'll just keep showing like when we keep adding data inside it it will just keep showing Okay so we've queried it the next thing we need to do is come to first name all right we come to first name and then come to the icon here for this particular uh for the text click on it go to user details and say first name so it's it's noun uh it will now be getting information from the database no longer static because initially we just typed it in let's come here click on the last name and click on the icon here and also say user details and say last name and then click on the next one say email click on the icon here go to user details and say email all right so like this now we will be able to get data from our database so um I think with this we can just go ahead and run it while we implement the next step in the process so we will go ahead and say uh we run it so we will wait for that to turn up okay so uh what what are we supposed to do next uh we've done creative read the next thing we're supposed to do is update and then delete okay so we can do update and delete simultaneously all right so let's click on the row here and put an icon for edits and icon for delete so let's click here and um okay we should have done that ever since at the beginning so we just duplicate it once but it's okay we'll just have to do it now click on this and then say um look search for icons so we say icon and um okay all right so I think what we just need to do is we just need to put for one we don't need to put for all just one is okay yeah so let's go ahead and say um yeah let's put an icon there so the icon here is come here to settings I'll set this particular place and change it from setting our link icon to let's say edit so if you search for it did you say something like this and this is okay for real and then let's add another icon there let's click add a child to widget search for Icon again and then we add another icon and so we have click here to change it from this to delete so we have this uh Bin icon so we can go out our application is finished running we will check it let's go ahead and then space this all right so let's click on it to say space so it's going to spread them across like this okay so I will click on this particular icon and give it some padding from the right say 16 all right and then this particular one I will click on it and give it some padding on the left say 50. I want to take it very close to the delete button so let's say uh 150. it's still not enough let's say um 250. okay that's too much so let's say to 10 all right so we have here so that is it we have one for edit one for delete and that's it so it also duplicates itself here because we are using a list of view to show everything let's check out what we have done here successfully now um if we go to create document uh secreted documents we click here we will see the document that we created so this shows here David uh David does the first name last name and this right so uh if you want to like make it a little bit nicer than this I will show you but let's just leave it like this for now let's implement this or can we still do it let's click on this and say uh come here and say just click on this again and uh instead of this come here to something called combine text so you want to put a text and another thing entirely so click on combine text the first one here will be the first name all right so you put here and space then add another text and then that's where we now go to choose the user details for first name okay so like that we are good with this so it's going to show first name and the the value so let's click on this and then click on this and go to click on this so edit it go to combine text the second one here says last name last name um this and then add the second text which is supposedly from database so click on this go to user details and say last name okay guys good then let's go to email all right so then let's click on this go to click on the edit icon go to combine text and say email and then uh come to add text then click on this icon here go to user details and then email all right guys so we're good okay so basically what is going to help us do is nice you have to put first name before this value last name before this value and then email before this so just makes it a little bit neater okay so um I don't know do you like the way this this goes well let's just leave it we're not looking at the design we just want to do crude okay guys we can refer to all the tutorials to see how we make things more beautiful okay so um here we have done this the next thing we need to do is give this icon some how do I put it okay so let's uh let's let's do some editing okay so the the editing is what we will call update yeah the editing is what we're gonna call update we will say um for for us to be able to edit what we have here we need to be able to transfer this information to the other screen and then update it from there so let's come to update this is the update screen so when we click on updates it's supposed to take us to the other screen all right and then um we will say uh let me see let me see let me see okay let's go ahead and see how we can create this we will click on ADD action and then click on like basically add an action it will say navigate to uh it is going to be to navigate to uh update then we need to pass information from this particular screen to another screen all right now uh because we need to be able to update it that way all right so let's go ahead and then pass information from here to the next screen so click on Define all right so we need to Define give it some parameters so we come here and then we will say user ref all right so this is basically like we're going to query something from uh reference noun initially we were just doing normal uh backend query so then reference then what kind of uh query type are we looking at doing eventually so we'll be doing document from reference collection type uh user details so we say confirm it brings us back here then we need to pass that information now to that page so we just set up some things now we need to pass it so we click on user ref click on inserts and then go to user details and reference and confirm now we've successfully passed information to that page now we need to go catch it then display it and then update it let's go to the updates screen the delete spot is quite simple it's just to delete so we come here to the update part and we need to catch it so we click on the we're not just going to catch it we need to have um we need to have uh what is it called so here guys we have a for the this particular part we have us we have some some things here so let's uh let's go ahead and just duplicate this and rename it to update all right uh no that's going to cost us some trouble yes so let's just go back here and uh let's do it all right there's no problems so add a Creator put a roll and then in the row we will put some uh text field all right let's do it text field okay so in the text field uh let's go ahead and just uh do what we've been doing let's give it padding here says 16 on the right 16 under tab underturb here 16 as well oh this ride didn't work so 16 on the right then let's screw down and give it the uh the hints text here will be uh Jean and then here will be first name uh first name so we don't need a insects right so let's take out the hint text so first name um then let's give it a border radius of 8 change the input decoration to outline all right I think we give the butter color this and okay all right guys we're good so let's duplicate this row Ctrl D and again all right then let's click on this column to add a button for update so add a button there scroll down change it to update okay so now we have the third to the last second to the last item then let's increase this with 360. okay and then let's go here and put some padding on the top for this so update so here let's change this from first name to uh last name last name then let's come here and change it from first name here you know we were just duplicating it to email all right guys Okay so now when we click on that it will come here and then um we can catch the the let's see if we can catch it um let's see if we can catch the information inside this uh field uh first name double text so let's catch it but before we catch it we need to catch the things inside let's click on the column here and then do a back-end query so we click on back and query add back and query query type is going to be documented from reference this time around not the very first one querying a collection uh okay because we're transferring data from somewhere we've already queried so we we want to reference that particular page we already queried okay so we will go ahead and come to collection and say user details okay so uh here we will now go ahead and say um I think this is where we pick this and say confirm and confirm okay guys so we've queried this now now we need to catch it like show it make it appear so we'll click here on the first name scenario then the let's go to where we are supposed to write the first name so instead of just having the first name we need to show the real name of the user or the what the detail that the user wants to edit so we'll come here to use a document and say that places for first name all right so that's the first name we'll show here then for here we will say show the last name so we'll click here go to users document and say last name and for here we will say uh click here show the user details then go to email now we have got those details we need to go ahead and then update it so let's click here all right we click here and then we will say uh update all right let's see okay so um here we will click on this go to action and say add an action and we go to firestore and then we say update documents so we say update document where the select the reference to update so we want to select the reference it's the user ref that we want to update so we put it like that and say confirm it's gonna ask us to select the detail the the field at the field so we'll click here again and again so for the first name where are we taking the the information from that we want to use and update the updates the user ref okay so say we don't we don't want it to come from specific value we bought from a variable so where is the variable we can find it in the widget State and it says here first name okay so we put it there for last name the same thing from specific value to from variable we click on this and then go to the the widget States and then say last name okay then we go to create email the email part not specific value but from variable click on insert and go to widget States and then choose email all right guys we're done and then just like you know how I do it I'll click to add a snack bar so I'll click to add another action and that's going to be a snack bar that says uh details updated so snack bar it to say uh details of dated okay so that's it all right so uh let's go ahead and test what we've done so far all right so this is it and uh okay so let's go ahead and then test it so I will click on this to run it and uh yeah so I needed you to see so we've done for create read and update the next thing we need to do is delete and delete is quite simple and then we're done with the tutorial I hope you're learning a lot you can click on the like button if you like the video already and you can click on the the Subscribe button as well and notification icon so that whenever we have videos you can just uh be reminded to check it out okay so now that we are done with that let's go ahead and go to the last one let's go back to the read screen so I think this screen is not so so nice for me right yeah guys it's I feel it's not really as nice as it should be thinking about what to do what to do so I will go ahead and then click on this list view now the column itself or should I say the row okay these are individual rule let's go to column and then in this column let me add a a container so add a container below don't worry we just want to give the container a width of 360. 360. and then I want to give you the height of uh one pixel and then I want to give it a black color all right so I'm just giving the container a black color okay so something like that and uh let's see let's give the container and then let's give the container some padding from that's the yeah all right so I don't really like this grayish color the color of the container I don't know if you like it but I will just remove it from that to um I'll just clear the color okay so like this is finer for me I feel this is neater all right okay so uh and permits me to run it again but we will still test it from what we have done before so this is what has finished running let's just check a look at it all right so here we have created we have already created documents and meanwhile let's create another document let's say uh uh my name is no longer David my name is noun David's and then rocks okay and then it's gonna be David's rugs and Gmail .com good and then I'll click on create okay so um it creates another document document successfully created secreted documents now you see that I have oh a lot of things has scattered a little bit there so now you see it created another document for me it says this is the first one David that I did then this is a this is the empty one that we created that first time and then here it has a I think the reason why it pushes around like this is also following the the size of the screen it's following it's using this size of the text yeah it's using the size of the text right that's the thing so um I'm thinking I shouldn't have put it here since it's always expanding I should have put it somewhere else uh okay so but let's go ahead and just click on it so if we click on this it brings us here right so we want to change the other field which is this I want to change this David to John and then from this to uh do and then from here to John doer gmail.com so I'll click here and say John all right so you see here it was formerly David so here I'm Gonna Change it to do all right then here I'm Gonna Change it to the John Doe adds gmail.com and then I'll click on update wait for a couple of seconds and details updated now if I go back you see here it changes from what it was before to now jandu and everything it's just perfect right so I think the only thing here is just this uh design all right so we'll try to adjust that in our next run okay so um so here let's see how we can adjust this basically why how we can adjust it is um let me see let me think let's go ahead and click on this and duplicate it all right yes let's just duplicate it okay so this is this part let's delete this icon here here then deletes this one here and then delete this one here all right and then here let's give it uh let's come here and change the padding to zero and then here okay that's okay let's click this oh the whole of the rule and say we want them to go this or the Direction all right so maybe give it a little space in between so let's say four all right so the icon here for delete should go for red and um the reason why I did that is so that the name can stretch alone this one doesn't need to stretch all right yeah okay so we have this we can run it before we run it let's go ahead and just do the delete icon so we click on the delete go to um go to the what is it called let's go to add an action click on add an action go to firestore and set delete so uh select reference that you want to delete I click on this and then pick the the reference it's basically going to be the user details and the reference here and then confirm all right so that's like the idea deleting is quite simple okay guys so we're done with our tutorial we just need to go ahead and run it and then that will be the end of our sessions here so let me close this ones that we did before and so far if you come to the database and you will see the different things that we've done here so this was the first one that was empty uh I will delete this so you can see it um so let's just uh wait for this to finish running and then that's it I hope you got value for your time and uh you know time watching this tutorial and I hope it gives you like an introductory background a little bit Advanced a little bit to understand how to do your create read update and delete functionality within your photo flow application okay so in a short time from now you will be able to uh see the how the application goes so let's just do one thing just to one thing on the side uh if this is your first time and you don't really uh know much about photo flow you can come to for you to run this application and have a link to it that you can show your friends or something you can just come here to the settings part go to platforms and then turn in the web publishing all right and then come back to web publishing here and then click here to publish your application to the web it will provide you with a link you can share with anyone to to use the application and it's work in real time okay so I'm going to click to publish this and I just wanted to show you that since we are waiting for this to finish running now we're done with this we can just look at how our application looks like I think now they should look much more prettier so let's add another detail let's say Naomi Naomi are John mommy John and let's say now me John it's gmail.com and then we create okay so document successfully created see created documents now it looks a little bit neater guys it looks looks like it so now we have first name John last name though then we have our rocks Davids we have Naomi here all right so we can click this is the the the very first one that we uh we created the sample so we can just click to delete it let it go okay so we made that go so our delete is working it's gone if you check here in the database it's gone too so this is the only real details that we have okay so we can go ahead and then delete rename I don't like the way the name is yeah so let me take it back to my name so I'll click it here and then change it to David all right and then Rock and then David Rock and gmail.com and then I click to updates and details updated I will go back and then my details are updated alright guys so it was really nice having you here I hope you get to check all the tutorials on this YouTube channel and keep practicing to understand how to use photo flow to build your amazing application for what I showed you earlier we're done publishing our application to the to the web so you can click here to see your application run successfully on the web all right so this is it it stretches across because that's just how it is it was built for mobile so if you want to see how it looks like in your mobile view you can just punch the F12 key or function F12 how however it works on your system and then you will see it like this so you can test your application uh we can go ahead and then just say um Jeff Bezos let's click on this and say Jeff Bezos right and then say Jeff Bezos ads Gmail at amazon.com okay so then you can click on create email uh basically create so documents successfully created and then you can say see created documents and this is it we have Jeff Bezos and all this good so who do you want to take out of here I think we take out John Doe all right and then we can take out Excel as well we can take out now me and possibly leave Jeff Bezos there alright guys see you in the next uh tutorial thank you very much

Channel: eelspace

Views: 22,111

Keywords: flutterflow tutorial, crud with flutter, mobile app development, no code

Id: ZSsg_EAaLJQ

Length: 61min 45sec (3705 seconds)

Published: Sun Apr 02 2023