🔥📱 Flutter x Firebase CRUD Masterclass • Create / Read / Update / Delete

yo what up welcome to the flutter and Firebase master class in this one I'm going to teach you the four most important operations when it comes to databases and I'm going to show you by cing up a super simple notes app where you can create a new note read the notes from a database as well as updating and deleting so let's go to your Firebase console and let's create a new project I'm just going to call it crud tutorial and I'm just going to create this now [Music] cool so now what we need to do is we need to connect our Firebase with our flutter project so I've opened up here a brand new flutter project and let's open up the terminal and if you've never used the flutter fire C before then you're going to need to install this one but I've already done that so I'm just going to skip that step and the the first thing we need to do is to say Firebase login to make sure that you're logged into the same email as the Firebase console then let's say flutter Pub Global activate the flut fire CLI looks like we have a little error thing I'm just going to copy this and paste it in sweet then let's say flutter fire configure and let's look for our Firebase project that we just made so there it is crud tutorial and I'm going to choose Android and iOS let's say flutter Pub add Firebase core also minut then we always need to add this little code in the main function just to set up so widgets flutter binding ensure that it's initialized and then let's change this to an asynchronous function and await Firebase initialize app cool and I always just kill the app and restart it just to make sure everything's working fine and there it is and if you come back to your Firebase console and you refresh it you should be able to see we connected the two apps so the Android and the iOS awesome now the first thing we want to do here is go to the build we want to have the fir store database and let's create a database hit next and you can choose your location but I'm just going to leave it at us cool and then if you come to the rules you can see it's allowing the read and write I'm just going to change this the write to be true and this just means we can now save data into it sweet now let's come back to our flut project again and let's add in this package for the fire store so flutter Pub add Cloud fir store and now we can access our database so I'm going to delete everything below the main function and just create this from scratch so I've got my app and then our material app and I'm just going to call it our homepage and it's always good practice to put your pages in a separate folder and this can be a blank scaffold and let's come back to our main do Dot and then let's import this cool so we should just have a blank scaffold sweet and let's just set up this app just the basics of it so the app bar and I just want to have a floating action button so that's the thing on the bottom right let's give it a plus icon cool so now I'm going to create a new folder called services and I'm going to have fir store. do and so I'm going to put all the operations into this file here so class fire store service now the very first thing we need to do is to get the collection of notes from the database and then we're going to have the four things so create read update and delete and specifically for us in this app we're going to say like create means adding a new note read is getting the note from the database and then we want to update notes and same thing is deleting cool so if I start with the first one here let's get the collection reference of notes and let's call The Collection just notes if I just quickly code just the first function here for the creating we want to have a future and this is for adding a note so I'm going to accept a parameter just a string for what the note is and the bit of code you need to know if we go to the notes you can see after the dot the add method and in these curly braces you can also have multiple Fields so let's say in the note field I want to give it the note but let's also have a Tim stamp cool and so let's try to test this out with our Floating Action button so if I click on this button here I want to open up a small box to get the user to type something in so if I create a method here real quick let's open note box and let's show the dialogue and we're going to need the context so I'm actually going to change this to a stateful widget so if you hover over this stateless widget and you press on Mac it's command Dot and you can see you got this option here I think on Windows it might be control dot we can now build this dialogue and let's just start off with a blank text field so just to test this out if I save this I click on the plus and sweet here's our little dialogue box and then you got the text field inside where we can type in so how do we access what the user typed well we need a text controller so you can see in the text field we can give it the text controller and then now we need a button so in the actions let's have a button to save so I'm just going to use a elevated button and let's say add cool so we want to type a Noe in and then we want to hit add to save it so currently it's executing nothing so inside these braces let's add a new note and we want to access the methods from this fire store class right so at the top here let's get the fire store service object at the top and then now we can say F store service and then we can access all of those methods so do add note and we want to give it the note so that's going to be the text controller cool and then just a couple UI things we need to do so after you add the note we want to clear what's in the text controller and just leave it blank after it's added in and then we also want to close the box so let's try this first note and I add it and nothing's happening on our app because we are not reading it yet but if I come back to my console and I refresh it you can see there's our notes and we got our first document and there's our first note there so that's the natural next step we need to do right we you need to be able to read now that we can create so let's fill out the read method here now read we're going to use a stream and a stream Builder to sort of continuously listen to any changes in our database so let's call this get note stream and we want to get the notes and we can now order them by the Tim stamp so descending let's say true meaning the newest one is going to be at the top cool so if I come back to my UI and the the homepage in the body of the scaffold we want to use a stream Builder and you can see inside here we have to give it a stream and so we can give it our get notes stream and so that's what it's going to be listening to and then we can build the UI so firstly let's just check if the snapshot has data then we can get the docs so let's create a list here called notes list and we want to dis play it as a list view cool so just to have a bit of plan about what we're doing so the first thing is let's get the individual document and then we want to get the string of notes from the document and then let's give that to a list tile to display nicely in the UI so the first thing is let's just get the individual document so we're going through the index of the notes list and and one bit of useful information for our other couple methods coming up is going to be this document ID just to keep track of the notes so I'm just going to use this a bit later on now let's get the note from each document and store it in this data variable so what we really want is just a string for the note text and in the data we can get this particular field called note sweet so now let's display it as a list tile for the UI and everything's all good except we can finish off this if else and so if there's no data then let's just return no noes cool and looks like we have some range error oh that's because we didn't specify the item count so that's just going to be however long the notes list is sweet so let's just save this and rerun it and you can see now we can read our database and we got the first note which means we should be able to create a second note and there it is cool so we can create and we can read now the last couple is the update so this one we need to know the doc ID so we need to know which note we're updating and we also need to know what the new note is going to be so for this one if you go to the notes let's go to the particular doc ID and then let's just update and you can just update the fields so if I come back to my UI let's just go to the trailing and let's let's have a gear button so it's going to have an icon button here and let's have a settings icon yeah it's probably good cool there's a gear and so if I click on this currently it's executing nothing so what I want to do is I want to open up another box so that the eer can type something in now let's see if we can recycle what we already used just to be efficient with our code so we already have a open note box method here for when we add a new note now let's just add a parameter here for the document ID and I'm going to put a question mark here and what that means is this can potentially be null I made a whole video about null safety so check that out if you need so when we call this method and we're giving the parameter document ID we want a string but it could also be a null value so the reason why I'm doing this is because when we hit the button to save let's put a little if statement here so if the document ID is null then we're going to add a new note and then otherwise we want to update an existing note okay so if I come down to my button here then we can just open the note box and just give it the doc ID let's H the gear we can now put in a new text and you can see it got updated sweet which brings us to the last one which is the deleting same thing we need to know which note we're deleting so let's accept the document ID as a parameter and once we know that let's just go to that document in the notes and just delete and then in our UI we need to have another delete button so in the trailing let's just put in a quick row here and have the button so one's for the update and let's just copy it to create another one for the delete and for the onpress we just want to call the delete note and switch up the icon cool and by the way if you save this you're going to get an error so you need to specify the main access size to be minimum cool so if I I try this and if I delete it and then it will get deleted and that's it that's how you use the crud operations now we can use this to make some other cool apps using flut and Firebase so thanks for watching and I'll catch you guys in the next [Music] one

Channel: Mitch Koko

Views: 41,887

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication, firebase

Id: iQOvD0y-xnw

Length: 13min 22sec (802 seconds)

Published: Sat Oct 07 2023