Flutter Firebase CRUD App [Create, Read, Update, Delete] - Flutter Tutorial For Beginners

tutorial we will learn how to properly create a flutter Firebase crud app we'll first learn how to set a Firebase and firestore and connect them to our flutter app then we will perform four operations these are creation updation and reading and deleting data from firestore so let's get right into creating a flutter current app with Firebase for that first step is to set up Firebase let's once you have to set up Firebase in order to perform flutter Firebase crud operations so the first step is creating a project you can just go to Google and write Firebase console and create an account if you don't have one and just start new app just create new project like this add new project using an interface like this you can give it any name you want like foreign let's now click on continue and we don't want it let's now create our project it will take some time so just pause the video for now yes so our floater project is now ready let's click on this continue and now you see an interface like this this is for iOS this is for Android and this is for web let's now see how to set up Android I will be providing and a link to an article in which you will learn how to set up IOS as well so just click on Android okay so this for that this is a uh this is a package name and we'll be fetching it from our project like this we have set our project you can just create a new project flutter project and then where you can go is there the path for that is in order to get this package name you can just Android app and build.grader there you will find the name this is this is a package name uh with a second no no no oops sorry sorry this is not the package name and this this is a packing application ID okay so you can copy it this only this part and then come back again there's no paste it here you can give it uh you can use an optional nickname but in the meantime we don't want it this show open key is needed when you want to sign in through Google or other out that need it but for now we are not needed needing it sorry let's now register our app no what we will do let's just wait for a moment yes now we have to download this Google service with Json file here yes it's now downloaded and now where you want to paste it is this okay it's Android and this inside app okay so inside app is inside this app folder you will just paste it okay and just make sure that use this name okay so remove the other part this Google hyphen Services dot Json let's save it Okay so just always try to use this name okay it will remove any unwanted errors between my face now let's come back to your okay this is done next now what we have to do is that we have to copy this class path like like and and we have to paste it here and we'll see Android now this app Android and this build dot grader okay so this is where we have to paste this class path uh it's inside dependencies okay this is good and we also need to add something else as well okay we're not seeing it here so we will just use we'll just write it down inside app folder and open this build.grader and what you can do is that just a second um this apply plugin you have to write a line reply login like this and then Dot Google dot GMS Dot Google services perfect so I didn't see it in the setup section so I think we have to just write it manually like this so I will also give you an article Link in which all these configurations is taught step by step using written code so you can just copy and paste this code from there as well now also set the Min SDK version to 21 for that let's see if we get it here in this ministry version yes just set it to 21 now you can click on the next and continue the cons continue to the console in order to finish the setup now what we can do is that we can next and continue console now this this setup was for Android now what we'll do is that we will stop our app if it's already running and then rerun it again if you still find any problems then you can just flatter clean the project like this by this command flutter clean and it will clean the build and all these stuff and then you can rebuild it again so I'll be rebuilding it again for that I'll I'll need to pause the video so as you can see that it's a building and the time it takes to build its uh oh wait a second I think we have to as you can see here Main we have to use this widget flutter binding as well it's to initialize Firebase so you can just uh use this and also import this Firebase score as this Firebase will give error so don't forget to import this line and this Cloud everything we don't need it here right now so cloud is to use Firebase cloud is to store the values the data and for that what we'll do is that first let's see the dependencies of split.eml okay so as you can see that we have imported a cloud firestore package from flutter Pub Dev you can search it here or you can directly go to this to the latest version of this package from the article that I will be providing you now what we will do is that we will also set up a cloud firestore that we will come to this build and yes this firestore database click on that okay it's loading yes create database wait a second so we are not in production mode we are in test mode so start in test mode you can change it to production mode if your app is ready and as you can see here the time step that it gives us is July 18 2023. we can remove it as well but for now I think it's good let's click on next okay now just enable it yes it's no setting up and it will work there's no CB4 project has been built or not it's second I think it has some errors Services required by a project I'll see what the problem is I can it is good yes the cloud file store is good to go I'll be pausing this video and try to solve that and then I will give you the solution as well if you find this error in your code as well hey there so I finally found the issue and it was really I think a silly mistake so let's go to this build.grade and I think is this the one wait a second no I think this was the one okay so I think I was using this dot this was the initial thing and this was creating the problem so this should be a column like this like uh like these okay so the problem was solved by this let's now see also the build was good okay we have successfully built our app and as you can see that this is a home page in the meantime it's not showing anything that's now restarted and let me show you what uh what it will show as you can see here we have seen uh we have seen a circular progress indicator for some time and it's now gone let's now see the logic behind it it will show a list of items that we have added but in the meantime we don't video have added we don't have any items here so it's showing a blank screen and with this floating we can add items okay so let's now click on it yes we now have a new screen that will be used to add or edit Fields okay so for that name let's now give it some name like Scott it can be anything you want each let's say 25 and email so gmail.com okay so now let's submit it as you can see here it's a very good animation and now after submitting it everything is cleared let's now see if it's updated in our database as well so this is where I found the solution it was it will not freely that solution but uh and that I have seen that I've noticed this and then I have tried in in my app as well and it fixed the issue so it is a solution this is where I found my solution thank you this let's now refresh it and see if something has happened here wait a second yes we can see that we now have a collection of users and it has one document and it has no feels like this ID email age and name so in firestore we have a collections okay so in collection they there can be many documents okay each documents can have Fields like this and each document can have other collection as well so this is basically you know uh you can see like a hierarchy of items and data so let's all see how this was implemented for that we have to send or update data okay okay this screen we have to go to the screen and let's now maximize it as you can see that this screen is getting some Constructors some items some data using this Constructor this it is name is email and ID and it will be used when we are trying to update the existing data but currently we will just see and we'll just look at this data okay a new data so for that we'll we are using this text editing controllers for name age email and show progress indicator this Boolean is used to show a progress indicator when the data is being sent or some functions or anything that is related to Firebase is is being executed then show this progress indicator we'll see how this uh how to make it functional in the later code but for now as you can see that interstate is called whenever with the screen is built so this is uh this will be called automatically and name controller we will be just assigning the values to these text editing controllers like this so if it has values then it will be assigned to them if it don't have any values then nothing will be assigned to them as you can see that the initial value will be null or empty string no yes in this body Behavior single child progress School view yes and this will be used whenever we turn on the we display the keyboard in our app uh there are some cases in which the widgets are way too big to handle or when the keyboard pops out it shows a bottom overflow so in order to remove that we can use this single charge scroll View and as you can see there we have a column widget as well now what we'll be doing yes its name is okay text field it will take the H controller okay these are three text fields let's just maximize it okay three text Fields yes material button so this is a button that will be sending data to the Firebase let's now see if the name controller is empty or age controller or email email controller is empty and then show a snack bar that fill in all the fields let's now see if it really works or not okay um let's not take with John uh 25 and let's now try to submit it and as you can see that a snack bar is showing that fill in all the fields first before sending data to the Firebase so this is a condition that will work this is good okay so if all the fields are valid or not empty then what you can do is it uh reference to the document okay Firebase firestore this will be used to take the instance okay that's the instant and this collection will create a new collection users if it's uh not present then document widget dot ID dot if this ID is not empty means the user is already the data is already present this document then it's not empty then use this widget ID means if the document of having some ID the specific ID if it's present then use the same document if it's not then give it a null value it it what little bit true is that it will give this document a new idea a new random ID okay so this is and this reference will be stored in this D user okay so we know we also have a doc ID okay it's uh empty for now if widget ID is not empty if the ID is not empty means this ID has some data then assign this to this widget ID to the stock ID okay so this doc ID will get the existing ID of the document else doc ID equal to D user.id or else adity user ID will be assigned to the doc ID okay no after all this is done we'll be passing adjacent data to our file store for that we'll be using this curly braces and there's a key value pairs okay so the first key is name and the value is name controller text and the second is age and then we can pass the age in a string as well but uh let's pass it in integers so we'll just passing the string to integer using this n dot parse method and then we have email and then ID dog ID okay if this ID is not empty means if the user is present then if the document is present then assign this doc ID this the existing document IDs to this Docker to you or else this D user ID to the stock ID hope you get it and this Json data is now assigned to a variable like this and before sending data to Firebase will be making this show progress indicated to true it's a it's a very beautiful animation and it will show that if the user is if the button is clicked and the urine is sending some data because sending data will take some time so in that time we'll just show this progress indicator so if widget ID is empty means if create document and write data to Firebase okay if it's empty then what this will do is that it will create a data a new document and then write data to it like this using this set method okay Json data this is the Json data that we are passing to it and then all the values will be cleared okay and show progress indicator will also be set to false and we'll be using search state to set the state else if the user is present then update the existing data using this update method okay the same Json data will be passed and then everything is just same okay so hope you now know how it is working like you know uh submit fill in all the fields let's see John gmail.com now as soon as you click on it it will see you can see that it was an animation of circular progress indicator and then when the data is sent then we can see that everything is now cleared we can use try catch a method as well a dry crutch block as well in order to catch any errors that that might occur while sending the data to Firebase or receiving it but for now you are just sticking to the basic so you don't get too much confused now let's see if we get the second data as well as you can see that the John is also now here okay so this was sending the data let us know what we'll know do is it we will not see as you can see that this two data these two items are now displayed in the screen but how are they're being displayed let's now see in the home screen okay yes so in body we are using stream Builder stream builder takes data stream it will continuously continuously check for the data okay so as a stream we are passing it Firebase file store and instance collections user and this snapshot will take what it will take is that it will take the list of documents that are present in this collection okay now we also have given it a condition if stream snapshot has data if it has data then then print this list view Builder or else this is where this list view Builder is ending if it's not then just give give us a side box of height and width of 100 and [Music] show a circular progress indicator widget like this okay so this is how it's working now when we have data what it will do is that it will this is the UI part and now stream snapshot dot data it will take the data and these documents will take the documents data okay the data inside documents so now this index will take the first document data as the list view will have a will start from zero index so zero one two three a so this is the first document data and it has it will take the name let me show you so this is the first document and this it's a index 0 as as you can see in the list view Builder and now what it will fetch is it will fetch the name from this key using the name key like this we can fetch it like this okay and same goes for each email as well and now we have two buttons as you can see here we have two panel this is for editing and this is for deleting let's now delete it yes as you can see that we have clicked on the delete button and this chord block is now deleted let's now see if it's deleted from this as well as you can see that we don't have any Scot block here let's now see how this is working uh yes this is the delete button and what is doing is that find out the Firebase or the instrument it will take the collections a collection of users specifying collection and this document if snapshot dot data the dog's index ID okay so this will take the reference of this document and then delete it okay so this was the reference of this document using the ID using this specific ID this specific ID will be stored the ID of every document will be stored and we will be using it to specify which document we want to delete so for that hope you now know how this deletion is working we can use this delete method in order to delete the document okay but now we will see how to edit it so for that we will navigate to our update screen let's now click on it as you can see that this is showing the same screen that we have used to create new data and by using Constructor we have passed the name is email and ID as well okay and as we have discussed previously that when when this screen is called the inner state will try to set the text editing controllers to the values that it has it has been given if it's not if it's empty then it will just assign them an empty string if not then it will assign them the values so for that for now we have values like this as you can see here we can jump to let's now give it an age of seven or three I I know it's funny but I it's just for the sake John one two three four okay so let's now submit it again I'll just see if it's working or not as you can see that is now 703 funny age okay email john134 ID idea is the same and the name is also John 2. let's now see how this updation is working but we have already discussed how this updation is working we are using the update method for it so Let's uh wait a second let's now go back to our previous screen and as you can see here and the benefit of stream Builder its uh continuously checking for the values and as you can see here John 2 703 John one two three four gmail.com so we can also delete it by clicking on this delete and as you can see here we don't have any items here which means this item this document has been deleted from here as well so this is how we can easily create a Firebase crud app and flutter so wait a second so in case you you didn't want to know how this updation is working and this is because of this update method we are updating the data the existing data so hope you know I have a complete idea of how how to create a current APP in flutter I have created a written article on it as well the link will be given in the description so do check that out and the complete source code will also be provided and that article so I think there will be all for this video I'll also be giving the GitHub I will also be giving the GitHub link to that that complete file in the specific article as well so must check that out and try it with the try catch as well also try to remove any error that I've made or do suggest me in the comment section how this code can be improved I'll be waiting for your comments thank you for watching this video Allah Hafiz

Channel: Let me Flutter

Views: 2,921

Keywords: flutter, flutter firebase crud, firebase, flutter tutorial, flutter course, flutter tutorial for beginners, Flutter Firebase CRUD app, Firebase, Firestore, set up Firebase, connect Firebase to Flutter app, create, update, flutter firebase read data, delete data, Github repo, practical implementation, create Firestore database, create UI, Flutter text fields, Flutter material button, Flutter list view builder, flutter firestore edit data, unique document ID, firestore update method

Id: 6nAcXJFYS6o

Length: 34min 18sec (2058 seconds)

Published: Mon Jun 19 2023