Flutter Firebase Firestore CRUD Operations | Create, Read, Update & Delete

well here we'll take a look how  to use firebase firestore to   do crowd operations now to do that first  i'll come to my android studio and here   i'll create a new project and that  there would be a new flutter project to console.firebase.google.com and here we'll create  a new project now we'll continue with the name   and some of you might not need this it  doesn't really matter okay if you don't have   google analytics just disable it then  continue and i'll select an account   and now i'll continue and try to finish  the project it's done then we'll continue   now we'll create a new project and we'll  choose android you can also choose ios   it doesn't matter okay now here the package  name now to be able to get the package name   you have to come to android studio and then  this android folder then app folder source main   and android xml over here now this is the package  name so copy this one and we'll put it here   and then we'll register the app okay now download  the js now what we'll do we'll get this file and   drag this into this app folder okay so i'm trying  to drag it to this app folder so inside this app   folder we see googleservices.json okay so  it should be right inside this app folder   okay right after that we'll continue and we have  to do some basic configuration and mostly it asks   you to add these three lines but first one and  the last one already been added so we'll just go   ahead and edit okay so we'll copy this one and for  this reason we'll come to this build.gradle file   uh we'll add it over here okay now this one they asked us  to add but it's already been   added with the new version so  you don't need to add that okay   now we do for apple build gradle now over here  mostly you we need this three lines the last three   but if you didn't choose analytics so for you  just this and this and this is already been added   actually so we'll copy this one and we'll go ahead  and do apply plugin now for this one we need to come to this build gradle over here and  as you see it's already been added so   the first line we skipped so would add  the second line which is this one now   we'll copy third line and would fight we'd find  dependencies now dependencies are here okay   and now once again this one is not important this  is firebase analytics you can skip that but as i   choose this one i'll go ahead and add it right at  the top of this okay all right now with the new   flutter version the minimum sdk should be 19 so we  should change this one otherwise it will get error   and we also need to enable multitasking okay  well it didn't say in the documentation but if   you don't do that you will get errors so here we  do okay so make sure that you spell it correctly   all right and with this we are done with the  setup so right over here we'll go back to our   console okay all right now uh we'll start our app  so i'm using android phone android emulator and   we'll make sure that we don't have any errors okay  all right so as it runs we'll do the next thing   what's the next thing the next  thing is to download this uh plugin   firestore plugin now to do that i would  come over here and right here i would write okay great now we'll run our app again  and make sure that we don't have any crush   okay so here is our app while everything  is working fine as we see over here okay   so now with this the basic setup has been done   now the most important part is uh creating a  firestore database and to be able to do that   we need to come to our project here  firestore database you need to click on this now you can choose your database the one that's  close to your area but i'm in asia so i'll choose   sub one okay so if you choose it close to your  area that would be fast to access then we'll   enable it okay now we'll go back to our project  and over here we'll choose this one main.dart and right over here we'll delete everything now right below it will  create a new stateful class okay now at the top we need to initialize  firebase so right over here we would do this one   so make sure you call this flutter bindings and  then you initialize firebase okay and at the same   time we need to import them and now we'll go  back to our firebase dashboard and over there   we'll create collections and documents now over  here we'll click on this button which says that   start collection now collection in  firebase is more like tables in mysql   so when you create a new collection  you are actually create a new table   of course you could have many tables so create a  new table or a collection and we'll give it a name over here it's asking you to create a document  now document refers to the rows okay now each   row should have an id so each document should  have an id now over here we'll create id auto   generated okay now of course in your row you might  have a lot of columns so those columns are called   fields okay now here we'll define some columns or  fields and first one we'll call it name and we can   initialize some default values for this one and  over here i'll call it shirts and then i'll create   a new column or new field and i will call it  price and over here the data type is a number   and then i will give it some default value and  then it will create a row with this toe fit   with this two fields so now it's trying  to load so here we created our first   table and in the table we have a row now each row  has an id so this is the unique id and the row   has two fields name and column once again this is  mysql database table this is mysql row and these   are the mysql fields so that's how you should  understand collection document okay and fails now after this we'll go back to our project refer to our table the table we created or the  collection we created in firestore so now this   line of code refers to the table or the collection  in firestore okay so because now we'd be able to   access this table using this instance so we'd be  able to do many operations on this collection or   on this table because we can access this products  instance or the product table and would be able to   use the add function update function and delete  function on this table now we'll come over here   and over here we'll create a scaffold inside  the scaffold we created a stream builder   now what does stream builder do stream builder  would help you to keep a persistent connection   with firestore database okay by the body  we wrap it around using stream builder   and as things happens in firestore or as we update  data because of stream builder we would get the   updated data in real time immediately now stream  builder has a property which is called stream and   for to to this stream property we are assigning  this snapshots now this snapshot is coming from   this products now once again this stream would  help you to get a persistent connection with the   database table for this products table over here  right after this we have this stream snapshot and   this stream snapshot will have all the data that's  available in our database or in firestore okay   so over here we check for data if we have data or  not okay if we have data we show the data in list   view builder otherwise we just go ahead and show  them this one now inside this list view builder   actually we access the data from the tables so  once again i said that stream snapshot contains   all the data so that's why you can access the data  using stream snapshot.data docs and length now   earlier i said docs refers to the rows in database  in firestore so here i'm accessing the rows   and i'm trying to get the length of the rows  which means how many rows i have over there   so here we have these documents and because of  this one we would be able to access the data from   the row and then i would save them in a document  object now list b builder would look through every   data we have in our database now once again  because this refers to the rows now the rows   we can now this refers to the rows and we'll  be able to access the columns or the fields   in the rows using their property which is  name and price which we have created early   so name and price which refers over here  so now we'll go ahead and run our app   and as you see the data is trying to load  and we see shirts 20 once again so let's   load the data yes so in our database we had  early shirts and 20. now to be able to work   on it in real time what i'll do i'll go  ahead and put the emulator side by side and then over here i would create a  new document which means a new row   and we'll see that it reflects here immediately and we'll set it 10 and then we'll save it and  soon we'll see that it updates here automatically   so as you see so that's the beauty of firebase  file store which updates data automatically   without any interruption so we are able to  add data from firebase dashboard directly   now we'll see how to add data from our app to do  that over here i'll create a new property which   is called a trailing for list style so in this  icon button as it is pressed we want to update   a certain document or a certain row and for this  reason we are going to create a method called   update and will pass the snapshot snapshot  for updating the certain row because this   row has this index because of this index we  can pinpoint a certain row first we'll create   text controller and then we'll create update  method so here we created an update method and   at the same time when we call this update method  we are passing a document snapshot or object   and as we do that first we try to grab the current  value from this document object and then we store   them in name controller and price controller  and we have used a show model bottom sheet   a bottom sheet to show the data as we work on  this but now if you want to get the complete code   for this one just check out the link below and  most importantly in this update method we have   this method called products dot dot dot update  okay now at the top over here whatever the value   we have currently in our database we get  that and store it and right after we grab   the value that's been changed in name controller  and price controller we save it over here in this   two variables and after that we pass them  in our update method which is dot doc   update now once again this methods are  already built in in firebase api all   you need to do go ahead and call them okay  now as we are trying to update we need to   pass the id now the id is coming from our document  now we'll go ahead and run our app here we see   that we have icons for updating once you click  on this we'll see that a bottom sheet shows up   so as you see over here we see it now we can  change it over here so we'll set men's shirt   and we'll click update button and we  see that here it's updated automatically now we can verify it in our firestore dashboard  so click on this one the men shirt so for hats   we don't see any change because we didn't make a  change now we'll make a change from our app and   we'll see that it reflects here automatically  so for hats i'll change it to women's heads i'll click update now this is the time to add documents from apps  now to be now to be able to add items from our app   all we need to do we'll go ahead and copy this  update method okay now we'll go ahead and copy it   we'll put it right over here and instead of update  we'll call it create now inside this create method   we need to make a little change everything else  stays the same so let's remove this completely   so here we have products add so now we'll go ahead   and create a button so that  we can call this create method so over here we have a floating action button and  from the button we are calling create method and   we want to position the floating action button  in the center now we'll go ahead and run our app now here we see that we have this icon button  now this refers to the create method over here   we'll click on this and we see that a model  sheet pops up now over here i'll write and all return and here we see that we have this  codes now we can verify that it's inserted in our   firebase database from here so now we see that we  have three records so we'll click on the last one   now here we see codes to be able to delete an item  we need to create a new method and it will create   the method right over here now here the method  name is delete and all it needs is a product id   so we'll call it from the body of our scaffold  now over here we'll copy this icon button and instead of sending the document  itself we can just send the id okay so what we'll do we'll click on this and we  see it's it deleted immediately and we get a   message and we can verify it in our firebase  we just have two items now we'll delete   one more item and we'll see  that it'll reflect immediately so it updated automatically of course  we'll be able to create another one but anyway you see the idea  that it created automatically   so yes so that's pretty much all about  firebase and how to use it in your app   so if you liked it don't forget to  subscribe and smash that like button

Channel: dbestech

Views: 57,277

Keywords: flutter firebase cloud firestore database crud, flutter firebase crud operations, flutter firebase tutorial 2022, flutter firebase crud, flutter firebase, firebase, flutter

Id: n1PM9XcYD5s

Length: 17min 54sec (1074 seconds)

Published: Sat May 28 2022