Flutter Firebase CRUD by a REAL Project - 2024 (Create, Read, Update, Delete)

hello guys it is Shivam here Welcome to our new video today we got an exciting session ahead as we dive into the world of flutter and Firebase in this video we will be tackling flutter Firebase crude operations through a real project which will be create read update and delete stick around because by the end of this video you will not only Master crude operations but also gain valuable insights from the Practical real world scenario so do not forget to hit that like And subscribe button for more amazing content on this channel so let's get started but before moving to the code let me show you what all things we will learn on today's video and how your app will look alike at the end of this video so today we are going to learn a flutter Firebase crude method by a real project I'm going to make a simple app here because I want that that the beginner who is learning a flutter and fire base for the first time they can understand the each code that I will write in the vs code so on this app we'll upload a employe detail to the respective Company by using a employee form and employee have to enter their name age and location to the file store database and through the employee collection will show all the employee to the respective company in our homepage so we are going to give a company name flutter Firebase here and in the homepage you can see the floating action button now when I click to The Floating Action button here then it will directly take me to the employee form page and here I will fill a employee detail here like name so I'll enter a name VI Sharma and his age 34 and the location United States now when I click to the add button then you can see that employee detail has been added successfully now let's move to the Firebase and we'll check if the respective document has been uploaded to the fire St database or not so in the employee collection you can see the second document which we have just uploaded from our app which is age 34 name VI Sharma and location United States so this was the first part of our crude method which is create now let's move to the second part which is read so let's move to the homepage and here you can see the all employ list here and let's move to the fire base and you can see the first employee name pritam Singh age 30 and second employee name VI Sharma with location United States so this was a second part of our crude method which is read so we can successfully read all the data from the fires to database and can show in our app now here comes our third part which is update now when I click to the pencil icon here and we need to change a PRM sync age to 50 and we'll click in the update button you can see that it just take a few seconds to update a pram sing age to 50 year now let's move to the Firebase and you can see that in the fire base the age has been also changed to 50 now let's change the employee name here to Divan Sharma now click in the update button and we can also change a respective employee name and you can see the same changes in the fire store database this was a third part which is update now let's move to the fourth part which is delete now when I'll click to the delete icon here then it will delete the respective employee detail from the F store database and it just take a few seconds to delete the details of that respective employee from the employee collection so you can see that how Ive created a crude method here by using a simple but a real project so that each and every every viewer who are watching this video or learning a flutter Firebase for the first time can understand each and every code that I will write on this video I will also suggest you please do not skip any of the process or part from this video because each and every process is necessary to get the result that I have just shown you now so by the end of this video you are going to learn lots of things regarding the flutter and Fire based because I will also tell you how to connect the Firebase for both Android and iOS so let's move to the code and develop a real project from scratch now you can see the deog banner at the right top of the screen so to remove the deug banner from the app we need to go to the main do do file and in the material app we'll write D so check mode Banner to fals and making it to false it will remove the banner from the top now we'll create a new folder name Pages here and in the pages folder I will create a new file name home. Dot and inside the home do do file I will write import flutter material do Dot and we'll create a stateful wiet name home here now we are going to use a init State set State and uh lots of function in our home do D file that's why I'm using a stateful widget here and if there is any case like if you don't want to use a set state in it State then you can use a stateless widget so I'm writing a State field widget here now body now we'll write scaffold body container child column so now you can see that after writing the widgets there is a blue line under each widget which doesn't look good when you are coding in the vs code so to remove the blue underline from the widgets I will add a two lines in the analysis options. EML file and after adding this line it will almost remove the blue lines from our widgets so this is a small trick that you can use in your app whenever you find a blue lines below your widgets now in the rule section you will add a two line lines now save the page and let's move to the home. dot file again and here you can see that almost blue lines disappear from our widgets now in the scaold widget I will first create a app bar where I will show the company name though I'm using a company name flutter and Firebase just random name here and in the title I will write row and I will create a first text wiet here now to show what all things I have wrote in the home. file let's move to the main. do file and in the home I will call a home do do file here so that I can show you what all things I am writing in the home do do file now let's hot restart the app now in the row I will first write write a text widget and in the text widget I will write a word flutter and we'll give the styling to the text wiet by using a text style now if you are a beginner and getting confused why I'm using a text widget container widget Etc in the app then you can know about this widgets in more detail by following one of my video that I have created on this channel which tells about this fets in the more detail and it will also help you to implement as much function you want in your flutter app by using uh this widgets I will paste the link in the comment box so you can also refer that video and can know more about a flutter widgets so we'll write color blue font size 20 20.0 and font we bold now here you can see the first text now just beside of it I will write a second text named Firebase that's why I have used a row wiget here so that I can write a two words together now we'll write colors. orange and here you can see the flutter Firebase text now if I want to move this text to this Center then I will go to the row and will write Main main AIS alignment do Center and it will quickly Center our both the text now I will create a floating action button here because as I've told you there will be one more screen from where the employee will fill the form and they will add their detail to the fire store database so I will go to the scaffold and will write Floating Action button Floating Action button on press and in the child I will pass icon icons. add so here you can see the floating action button with a icon add now I want that when I tap to this button then we'll move to the employ form page so I will create one more file in our Pages folder name employ do Dot and we'll again create a stateful widget name employ here now we'll write scaold body column children now to push the user to the employ doart page let's move to the home.art file and in the onpress method I will write Navigator dopo context and we'll write material page root this function will help us to navigate the user to the employ do. page so that it can fill the form and can upload to the fir store database so by this method we can successfully move to the employ do. file now let's copy the app bar that we have just wrote in the home. do file so it will as it is and will just change the text to employ form here now you can see that after creating app bar it automatically creates a back arrow in our app bar so after tapping to the back arrow we'll directly move to the homepage now in the column widget I will write the text name here so that employee can upload their name so we'll write text widget name so inside the text widget we'll write name and we'll give the styling by using the text style now I want to provide the spacing from the left side so I will write Edge insert do only left 20.0 and we'll also give the margin from the top 30.0 now let's increase the font size to 24 I am trying to create this app as simple as I can because I want that someone who is developing their first app through my this video can understand the flutter code very easily and can follow some more series that we have already uploaded in our channel so through this app they can learn all the basics regarding the flutter and fire base and after learning the basis from the flutter and fire base they can directly move to the chat app Todo app or food delivery app to master their app development skills so I'm not going to make it more complex for the viewers who are watching the flutter code for the first time so I will try to keep as simple as I can so that you can learn each and everything regarding the flutter and fire base through this video now in the container I will write text field now let's hot reload and here you can see the text field with a underline now I want to move the name to the left side of the screen in our column widget cross AIS alignment do start and it will directly move the name to the left side of the screen now I want to remove this underline from the text field so I will write decoration input decoration border input border do none so if you want to learn more about the text field then as I've already told you the video where I have told lots of thing regarding the text field wiet 2 you can follow that video Link in our comment box now we'll write decoration box decoration and we'll first give the border to our container so I will write border do all now here you can see the text field now let's provide the margin from the right side so we'll write right 20.0 now let's give the spacing from the top so we'll use size box height 10.0 now let's provide the Border radius to The Container so we'll write border radius do circular 10 so here on the text field we can type as much text we want so I'm writing my name Shivam Gupta here now I want to provide the padding from the left side so I will write padding Ed insert do only left 5.0 sorry 10.0 now let's create some more text field so that the employee can enter age and location [Music] [Music] to [Music] [Music] now let's create a button here add so that user can directly press the add button and can upload the data to the wir store database Now to create a direct button I will write elevated button here and in the on press we pass a function that will be executed when the user will press this button and in the child will write text widget and in the text widget will write add text here and we'll give the styling to the text wiet by using a text style now let's Center the button here so we'll wrap up with a center widget now we'll provide the space so we'll write size box height 30.0 so we have created a complete UI for our employee form page now let's move and add the Firebase to our app so that we can upload the data to the fir store database first I will create a project in our Firebase so let's move to the Firebase and we need to enter a project name here so I'm writing basic app now click on continue again on continue now use default account for Firebase create project so as you can see Firebase is creating your project so wait for a few seconds so click on continue and we'll directly move to the Firebase and here you can see that we can add IOS app Android app and web app through the Firebase so first I will add a IOS app here then we'll move to the Android app so in the IOS app first we need a apple bundle ID so let's move to the xcode and we need to copy the bundle identifier from there and paste it in the Firebase so move to the runner then signing and capabilities and copy the bundle ident fire from here and we'll paste it in apple bundle ID now click in the register app and download the Google service- info. pist file now make sure that it should be Google service- info. pist file if anything is written rather than this then make sure you edit them now just paste it below the info and click on finish so it is done now let's move to the Firebase again click on next next again on next continue to the console so as you can see we have successfully added the IOS app here now let's move to the Android app now we need a Android package name here so we'll go to the Android app build. gadal file and we'll move to the application ID and we'll copy the application ID from here and we'll paste it in the Android package name now click in the register app again now download Google Das service. Json file and it should be also in the Google DS services. J file and if anything is return rather than this then make sure you readit them now paste it in the Android app folder so it is done now click on next now copy the plugin from here and we need to paste in the Android build. GLE file and in the class path we'll paste this plug-in now we need to change some of the line of the code for our class path I will also recommend you to please do not skip any of the pro process while setting up the Firebase because each and every step is necessary so that we can connect the app for both Android and iOS now let's move and we'll copy the plugin and we'll go to the Android App build. G file and in the apply plug-in we'll paste the code and we'll again change some line of the code here now we'll copy the dependency from here and we'll paste it to the same file in the dependencies now second line now click to the next continue to the console so as you can see we have successfully added the IOS app and Android app here now let's move to the Pu Dev because we need to copy some of the packages from here and paste it inside the ppml file so here comes our first package name Firebase core to enable the Firebase in our flutter app so move to the installing copy the dependency from here and paste it in the bpec ml file now to access the cloud fire store from our flutter app Here Comes our second package name Cloud fire store now move to to the installing again and we'll copy the same dependency and paste it inside the ppec ml file so it is done now run all the packages in our flutter app now let's move to the Firebase again because we need to enable some of the function for our Cloud fire store so that we can upload the data from our flutter app so we'll move move to the fire store database click on get started button click on next then in the enable button so as you can see fire store is setting up some security rules so wait for a few seconds now let's move to the rules and we need to change it to false to True please do not skip this process because if you don't change the rule from the fire store then you can't upload load the data to the fir store database so do not forget to change the rules from the cloud fir store so we have successfully added a Firebase in our flutter app so in the Firebase here it will the collection name and the document ID and we will upload one by one employee detail here do not need to worry I will make it very easy for the beginners who are learning the letter Firebase for the first time so that they can upload the details to the fir store database in just few seconds now in the leap folder I will create a new folder name service here and inside the service folder I will create new file name database. file so many of the developers might do that they will write all the functions regarding the Firebase in the same file where they have created the UI but I always recommend you to create a separate file like database. file or any other file from where you can write all the Firebase function and can call them by using a single code this will make your code really clean and you can customize your app very easily and it will also save lots of time while writing a flutter app in the vs code now in the database do file I will create a class name database methods now we'll write future and we'll write add employe detail function here which will be called when the user will click in the add button here and we'll pass a map string Dynamic now you might be thinking that why I have used a map string Dynamic here basically map string Dynamic help us to upload the user form easily to the cloud file store so in the string we'll pass name age location and in the dynamic method you can pass anything like string integer Bullen character Etc I will show you how to upload the user details by using a MTH string Dynamic here so we'll write a employee infom map now we'll write a sync we'll also write a string ID here basically string ID is because as I've told you there will be a specific ID for the each document that we will upload to the fir store database so that we can delete update a specific employe detail from our app easily so by passing The Unique ID you can quickly update or delete the specific document from the fir store database in just few seconds now we'll write Firebase fire. instance. collection and employee will be our collection name and specific doc ID and we'll write dot set method to upload the user info map here now to handle the text in our text field we'll write text editing controller name controller equals to new text editing controller so by using a text editing controller we can easily handle the text that the user will enter on these three text field so we'll create each controller for this text field now let's pass the controller in our text field so we'll write controller name controller and same for the age we'll write controller age controller and for the location location controller so if you have any questions regarding the things we are writing here you can comment me in the comment box I will try to answer all the problems regarding the flutter app you are facing here or you can DM me directly in my Instagram ID so that I can quickly provide you the solution regarding the problem you are facing now we'll write map string Dynamic here and as I've told you I will show you how to upload the user detail by using a map string Dynamic so our string will be the name and through the name controller. text we will get the text that the user will enter in this text field so to get the text from the specific text field we need to write first the controller then do text to get all the text that the user will enter on this text field so same for the age and the location now I will write a sync a wait database methods dot add employee detail and in the map string we'll pass a employee info map that I have just shown you in the database. do file and in the ID we'll pass a unique ID here so to create a unique ID let's move to the puve dev and we need to copy the package R random string so that we can create a unique ID for the each document here now we'll write string ID equals to random alpha numeric 10 and it will provide a random alpha numeric of 10 character here and we'll pass a specific ID to the map string so that we can easily handle the employee details here and same to the database methods now after uploading the details to the fir store database I want to show the user that if the details have been uploaded to the fir store database or not to show the hint or a toast mage message we need to copy a flutter toast package from our Pub Dev now go to the readme section and here you can copy the code for both Android and iOS and we'll paste after writing do then method so it itself says that after completing the database methods function it will show the text message that employe detail has been added successfully now to run all the code let's move to the terminal and first we need to write a flutter clean command here then flutter run to run all the packages that we have just added in the prospec ml file and the complete app to our emulator so our app has launched successfully now before uploading the details to the F store database we need to go to the main. do file and add the few lines to enable the Firebase in our flutter app so we'll write in avoid main function a sync and we'll write wiet flutter binding do insure initialized and we'll write await Firebase do initialize app do not forget to add this line in your main. do file otherwise you can't upload the details to the fire store database now let hot restart it again and when I click to The Floating Action button then it will directly take us to the employee form here and in the name I will write Shivam Gupta here and we'll pass some random age at the location India now I will click to the add button and as you can see employee detail has been added successfully now let's move to the fire base and let's check if the detail has been added to the fire base or not so we'll refresh the pitch and here you can see the collection name employee and the specific ID with a a30 location India and the name that we have just uploaded from our device so we can successfully add the detail to the fire store database so let's upload a second employee name Rahul Sharma and we'll pass age 50 and location United States now click in the add button so employee detail has been added successfully and you can see the second user detail has been added to the same collection employ here so our create method is working brilliantly and you have learned how to upload the user detail to the fir store database so from the crude method you have learned how to upload a first method which is create so this was the one of the easiest way that I have tried to explain to our viewers so that they can easily upload the details to the fir store database in just few seconds so if you are enjoying this video and want to show some extra love and support considered buying us a virtual coffee every SHP fills our coding adventure and keeps the flutter magic alive you can find the link in the description box now let's move to the our second part which is a read from our crude method so from the read we'll show all the details that we have just uploaded to the fire St database in our home screen so let's move to the home. do file and we'll first create a UI then will add a function so that we can get all the details from the fir store database in just few seconds now we'll write container and we'll write with media query. off context. size. withth now you might be thinking that why I have used a media query in a width here basically media query is something that makes your app highly responsive so if you want that container to use a complete width of your device automatically then you can use a media query here rather than providing a specific number to your withd now we'll write decoration box decoration and we'll pass color colors. white and Border radius border radius do circular 10 now we'll pass column in our child wiet now in the children we'll write text name and we'll show the name of our employee here so for now I'm writing name Shivam Gupta now style text style colors. blue and font size 20.0 and font widt B now water reload and here you can see the name of that employe now we'll wrap up a container with a material with it so that we can clearly see the container widget here and we'll provide a b radius to the material wichet and here you can see the container witchet clearly so let's provide the margin from the left and right side of the screen so in the container I will write margin Ed insert dot only left 10.0 and right 10.0 so here you can see the margin let's increase the margin to 20 for both left and right side now also provide the margin from the top 30.0 now we'll write age 50 don't think that my age is 50 I have just wrote a random age here now we'll copy the same text with it and we'll show the location of that specific employee so in the location I'm writing India now let's give the padding to The Container so we'll write padding Edge insert. all 20 now to move the text to the left side we'll use a cross cross axis alignment do start so this is just a UI now we'll show all the details from the fire store database by using a stream Builder function so through the stream Builder function it will automatically shows all the documents in the respective collection in just few seconds and if you update or delete any of the document from the Firebase then the stream Builder will quickly Source the update in our app in just few seconds so I will always recommend you that when you want to show the documents from the firet database then always use a stream Builder here now let's move to the the database. do file and we'll create a function get employe detail because by using this function we'll get all the details from the fire store database so we'll write future stream query snapshot basically query snapshot will help us to read all the documents for that respective collection now we'll write Firebase fir store do collect ction and we'll pass a collection name employ and do snapshot so that we can get all the documents from the respective collection so we have created a get employe details function so that we can read all the employee details from the fire store database now let's move to the home. do file and and here I will write stream employee stream which it all employ details and in the return return I will create a stream Builder here and in the Builder I will write context a sing snapshot snapshot and return snapshot. has data so snapshot will check that if the data present in a respective collection or not so if there will be a data or a document in the respective collection then it will show all the data by using a list view. Builder and if not then it will just show a container here now in the Stream Builder I will create a stream employee stream that we have just wrote above now in our list view. Builder I will first get the count of all the documents that present in our respective collection so that we can handle all the document one by one by using the index of that respective document now in the item Builder I will write document snapshot DS equals to snapshot. dat. DOS index and we'll return the container that we have just wrote for the UI so we cut a complete material vet from here and we'll paste it inside the list view. Builder now in the name I will pass DS and a respective field name name here and same for the age and the location please make sure when you are writing a field name in a DS then it should be exact that what you have mentioned in the fir store database if there is a something mismatch like a space or a character small or Capital then it will not read a respective document from that collection now we'll create get on the load function here because I want that as soon as we opens the app then the app will quickly collects all the details from the respective employee collection and in the employee stream we pass database method do get employe detail and we'll use a set State method so that we can quickly pass the details to the list VI Builder and in the init State I will call a get on the load fun function now the reason for passing the function in the init state is because init state is the first function that usually calls when the app launches now we'll write all employ details function in our column wiet so that we can show all the details and we'll wrap up with a expanded widget so that it can use a complete height of our device now after hot reload you can see the detail from The employe Collection that we have uploaded in the fir store database now let's give the space from the bottom so we'll wrap up a material wiet with a container wiet and we'll give the margin from the bottom so here you can see the first document named Rahul Sharma age 50 and location United States and a second document shivang Gupta India 30 so both the documents we can see in our app by using a stream Builder and we can successfully read all the details for that respective collection so let's move and add one more users and it will show the details of that user in the homepage in just few seconds so in the name I will write Manos de and age 34 and location India now click on ADD so details has been uploaded successfully now let's move to the homepage again and here you can see that it just take a few seconds to show the details from the F store database so we have done the second part of our crude method which is read so if you got to know how to read the data from the fir store database then do not forget to hit that like button down below now let's move to the third part of our crude which is update so we'll move to the text widget and we'll wrap up with a row widget and in the row widget I will provide a icon edit so that user can directly edit the employ detail from the homepage now I will create a so dialog box here so that user can see all the details of that respective employe and can edit one by one through the text field so in the future I will write edit employee detail which will be the our function name and in the string ID we'll pass a respective ID of that document and in the Builder I will write context and in the context I will write alert dialogue now content container child column children and in the children we'll write row vet here because I will also create a close button so that they can close the S dialog box by using this icon and uh two text that we have already wrote in the app bar which will be edit details and we'll wrap up the icon with a Gest director and in the on TP function I will write Navigator do pop context so that it can automatically pop out the dialog box from there now I'll copy the same name and the textt field that I wrote in employ do do file because this will also save the time write the code again and again and we'll paste it in the column wiet and we need to also pass a controller so that we can handle the text field now let me show you what all things I've wrote in the dialogue box so we'll wrap up the icon with a g a director and we'll call a function edit employe detail now in the ID we'll pass a respective ID of that document so that we can update that document in just few seconds now when I'll tap the edit icon here you can see the dialog box that I'm talking about so here the font size is too large so let me decrease the font size to 20 now let's move the text to the left side so again we'll write cross AIS alignment do start in our column wichet and also provide the space between the headline and the text field now we'll create a update button here so that user can update the details of that respective employee by pressing this button now to show the text in the text field so that user can update the details of that respective employee we need to assign the text field with the text that has been already shown in the F to database so we'll write name controller. text DS name H controller. text dsh and same for the location so by doing that we are assigning a name age location to the respective text field so that user can edit the resp effective details easily and can update the document from the flutter app now when I click to the edit button you can see the name Rahul Sharma age 50 and the location now let's move to the update button to the center and we'll also provide the height from the top by using the size box now let's move and when I click to the edit button here then here you can see that it calls all the user details in the respective test field like name age and the location so by using the update button I can update the name and the age and the location of that respective employee by using this text feed but before that we need to add the function in our elevated button so that it will be called whenever we'll press the update button here so let's move to the database. file and we will create a function name update employee detail so we'll write future update employ detail now we need to pass our respective document ID so that we can update the document from the fire store database by using this ID here so this is the respective ID of that respective employe document so we need to go to that respective document and can make the update by a unique ID of that employee now we'll write return await Firebase fire st. instance. collection and we'll pass a collection name employ here now dot doc and as I've told you there is a respective doc ID for each document and we'll use dot update function and in the dot update function we'll again pass a map string Dynamic here which is a updated map here so we'll write a map name name update info and we'll pass it to do update function here so by using this update function it can quickly update the respective document of that employee now let's move to the home. file and now on the onpress function first I will create a map string Dynamic and will pass a map name update info and we'll pass name age location we are writing this because if the user want to edit any of the text field and want to update the respective document then we'll pass a updated map to that document and we'll write location and in the location we'll write location controller. text and we'll also pass the respective Ive ID now await database methods dot update imploy detail and in the ID which will be the respective ID and update info which will be the map string Dynamic and through the dot then method will'll directly pop out the dialog box here by using Navigator dop context now let's hot restart it again now let's update the Mano day age to 20 year now we'll click to the pencil icon and we'll change the age from 30 to 20 now I'll click on the update button and you can see that it just take a few seconds to update the age in our fire store database now let's update the usern name here so I will write Rahul Gupta here and we'll click on the update button and you can see that it just take a few seconds to update the name from Rahul Sharma to Rahul Gupta here and let's also update the location of that employee to England and again you can see the update in the fire store database so our update part is is done and we have successfully executed the third part of our crude method which is update now let's move to the fourth part of our crude method which is delete so now we'll create a icon delete here so when the user will press a delete icon then it will delete the respective document from The Collection name employee so we'll first create icons icons. delete now we'll give the color to our icon so we'll write colors. orange now remove the main AIS alignment do space between and we'll give a spacer here and through the spacer it will provide a maximum space between the widgets here now we'll give a size box with 5.0 between our two icon so that we can easily get a minimum space between the two icons to execute the update and delete function now let's move to the database do file and here I will create a function name delete employee detail so we'll copy the same update function here and we'll just change some of the code for our delete employee detail and we'll call a do delete function here now let's move to the home. do file and we'll wrap up the icon with a gesture detector and in the on tap method we'll pass a data database methods do delete employee detail and we'll pass a respective document ID by DS ID now let's hot restart it again so now if I want to delete a mano de details here which is our second employee so I'll click to the delete icon here and it will take just a few seconds to delete that document from the respective collection name employe and you can see that respective document has been also deleted from the F store database now let's remove one more document here so we can successfully delete a respective employee detail from our app so our fourth part is also done which is delete from our crude method let's move to to the database. file and the function add employee detail which is a first part of our crude method which is create get employee detail function is our second part of our crude method which is read and update employee detail is our third part of our grud method which is update and our last part is delete from our crude method so we have successfully navigated through the complete flutter Fire based crude operations turning Theory into practice with our real projects though I've tried my best to make it as easy as possible so that beginner can also understand the code and if you enjoyed this video and want to show some extra love and support considered buying us a virtual coffee every sip fuels our coding adventure and keep the flutter Magic alive you can find the link in the description box also do not forget to hit that like And subscribe button so that you won't miss out on any of the amazing content we upload on this channel until then keep coding keep having fun I will see you next time thanks for watching

Channel: Shivam Gupta

Views: 11,837

Keywords: flutter firebase crud, firebase, flutter, flutter firebase, flutter firebase tutorial, flutter firebase auth, flutter firebase crud example, flutter firebase setup, flutter firebase setup android, firebase flutter, flutter firebase setup 2023, flutter firebase crud app, flutter firebase update document, flutter firebase firestore, flutter firebase crud tutorial, firebase tutorial, flutter firebase database crud, flutter firebase android setup

Id: qyP1NOXT9GU

Length: 57min 14sec (3434 seconds)

Published: Tue Dec 26 2023