Flutter Firebase Tutorial - Cloud Firestore

hello everyone in this video we're going to attempt to talk about the basics of firebase more specifically cloud firestore one of my main goals with this channel is to make learning flutter somewhat simple so it's hopefully fairly easy to understand firebase however is unfortunately not very simple but i've had a few people request a firebase video so i'm going to try to make this as simple as i can i'm going to include a link in the description with errors that i've encountered as well as resources where you may be able to get more information ultimately understand there's a lot of different features of firebase and there's multiple ways to implement them so i'm just going to show you one way to implement cloud firestore i'm also going to list the versions of software that i'm using here so if you're using older versions than i have here or newer versions have come out this tutorial may not work for you so take that into consideration so the first thing we're going to do is create our project i'm just going to do file new new flutter project here i'm going to enter firestore example now this organization is going to be very important for this process if you have a domain for your software or yourself i would suggest putting it in here but i think that you can put almost anything in here as long as it's unique if you do plan on doing a lot of software it might be safe to just go ahead and get a domain and use it here you will put the domain extension first so i'm going to put com.learn flutter with me here so i created the project and for now we can just minimize it or close it next we're going to go to firebase.google.com once you're there click on go to console over here in the right if you've never done this before you'll see this create a project button so let's start with the name for your project i'm going to name it fire store example i'm going to accept the firebase terms and hit continue so this is asking me if i want to put analytics in the app since we're just testing firestore i'm going to disable this we'll wait for it to create the project so once the project is set up you should see get started by adding firebase to your app we're going to start with ios so click that so right here you'll see this ios bundle id which relates to the id we discussed previously probably the easiest way to get this id is to go into your project go into ios and then right here where it says xc workspace if you'll right mouse click on that and do reveal in finder right here you'll just double click on that to bring up xcode so you'll see runner right here you can just double click on that and here's the bundle identifier that we'll use for ios so i'm going to copy that paste it in here and then we're going to skip these for now we're just going to click register app so now that we're done registering the app we need to download this google service info file make sure that the name hasn't changed you'll see i have two different versions here this one will not work you'll have to use this one now what we need to do is we just need to drag and drop this into this runner folder here inside xcode so it's actually the second runner folder i'll do that now it's going to ask you a quote some questions you need to make sure that add to targets is checked and then you'll see that the file is there under runner one other thing we need to do while we're in xcode is under this deployment info you'll see this ios 9 we're going to change this to at least 10 and you can now close xcode so we are now done in this section you can hit next and next and next and we will continue the console now there is one more thing we want to do in apple we want to make sure that cocoapods is up to date so if you type in gem which cocoapods i'm currently running 1.10.1 if you have an older version or there's a newer version out you can simply type sudo gem install cocoapods to update it and you'll see there that i'm up to date so now we want to add the android version just click add app here click on the android icon so you'll need the android package name which should be very similar to the id we had to get for ios and i'll show you where to get that just simply go to android in your app under the app folder and then you'll see build gradle here and this application id here is what you're looking for so we'll copy that paste it into this text field now there are a few more things that we have to do on the android side so let's go back to the app for a second while we're inside this build.gradle file we're going to add something beside these apply plug-in entries you can now save that one and close it we're going to go to this build gradle file here which is actually under the android folder you're going to look for build script and dependencies we're going to add a line here now we will need to enable multi-decks to enable multi-dex we'll go into android app build gradle go down to the dependencies and add this line [Music] and then in android default config add this line [Music] save that file and close it and we'll move back to the firebase site so over here we're going to leave these two fields blank that are optional we're going to hit register app we're going to download another configuration file again make sure there's no additional characters in your file name it must look exactly like this once we've downloaded the file we'll click the app folder open and this is where we're going to put it so i'll just drag and drop it into here and there we go so we're going to skip everything else because we've already done that and we'll continue to console now you should see two entries one for ios and one for android so now we can start installing firebase actually into our app i'm going to bring up terminal i'm going to type in flutter doctor and you'll see that i'm currently using version 2.2.1 of flutter so we'll start by adding firebase core it can also be done from the terminal you'll just type flutter pub add firebase underscore core hit enter and then once that's installed i'm going to type flutter pub add cloud firestore now if you open up your pub spec yaml file you should now see two records in there firebase core and cloud firestore and these are the versions that were installed for me okay so now we should be ready to start programming let's give it a try in the list view video that i did i created a grocery list app the app listed the groceries you could add groceries and you could remove groceries but one big flaw was that if you were to close the app you would lose all of your groceries so we're going to build that same app today but we're going to use firestore to store the groceries so the first thing i'm going to do is clear all of this out [Music] i'm going to do my main and my run app here i'm going to go ahead and create a stateful widget by typing in stful i'm going to put in a material app a scaffold and an app bar i started my iphone emulator and i'm going to press play now there is a chance working with firestore or firebase when you first start your emulator that it takes a longer time than normal unless you have a serious error it should run eventually all right after several minutes we have the basic app running in the emulator but we haven't done anything with firestore yet so let's start adding that so i'm going to import firebase core at the top and i'll go ahead and import cloud firestore as well so in main here we're going to add a few things to initialize firebase and since we're adding away we have to make void a future and we need to add async here in our app bar we're going to go ahead and add a text field this is where we're going to enter the groceries that we saved to the list and i'm going to go ahead and add a floating action button which we'll use to save the items to the grocery list so this is what it looks like so far let's go ahead and set up our grocery list inside firebase so if you close your browser you can just go to console again at the top right and you'll click on your app mine's called firestore example right here we're going to click on cloud firestore up at the top you'll see create database so click that we're going to start in test mode since this is just a demonstration i'm going to set my cloud firestore location to us central because i'm in the central part of the united states so now that that's set up i'm going to start a collection i'm going to call it groceries we're going to click this auto id here so it creates the id for us and we're just having a name in there for today we'll go ahead and do a default one of apples so it should look similar to this on your screen now we can go back to the app so inside the body of the scaffold we're going to create a stream builder to connect to firebase we're going to set up our stream by pointing to the groceries collection in firestore we'll set up our builder for now we're just going to return a list of you [Music] so due to null safety we get an error here that says the property docs can't be unconditionally accessed because the receiver can be null we have a few options we can put a question mark there that says that you know there's a possibility that could be null but this would fail if it was null or we can put an exclamation point that says we guarantee that it's not going to be null so that should be enough to test this so far let's go ahead and do a hot restart and there we go we see apples from firestore so now let's add the text controller to the text field up here so when we press save we can actually add the firebase i'm going to go right here to the top of firestore app state inside the text field i'm going to say controller text controller so inside the floating action button we're going to save the value of the text field into firestore before we do that though let's optimize our firebase code just a little bit up here close to the top of firestore app state inside the build method we're going to do a collection reference and then down here in the stream builder where we had this code we're going to remove this and just do grocery snapshot so what that allows us to do is to tap into this groceries to store the value of the text field into firebase from within the floating action button so i'm going to do a hot restart on that i'll type in oranges in here and hit save and there we go let's go ahead and clear out this text field when the save button is pressed i'll go ahead and type in another fruit hit save all right it's in the list now and the text field cleared the fruit are not in alphabetical order so let's fix that real quick we'll do that right here and now they're in alphabetical order so now when we long press on a list tile we're going to remove it from firestore we'll go down here into the list tile we'll enter on long press [Music] and then we'll type grocery dot reference dot delete and we'll give it a try by long pressing over bananas and it disappears so if you've been working along with me so far you may have noticed that you've been getting this error null check operator used on the null value the reason you're getting that is because i am saying here that this will not be null but for a moment it actually is null so when you run it you may even see a red screen for half a second while it's null you see it there for half a second we can fix that error by putting an if then statement that checks for data right here now you'll notice there's no error down here and when you hot restart you no longer see the red screen you'll see loading for a half a second well i think that's the simplest that i can make this um hopefully it was clear hopefully it was easy to understand to let me know in the comments if it was or it wasn't again i'll put a link in the description to some resources if you run into any errors or just need additional information in general so you might want to check out this video here and if you'd like to see more of my videos please consider subscribing thanks and hope to see you in the next one

Channel: Learn Flutter with Me

Views: 13,167

Keywords: Flutter Firebase, Flutter Firestore, Flutter cloud_firestore, Flutter 2 Firebase, Flutter Firestore Null Safety, Flutter 2 Firestore, Flutter 2.2 Firestore, Flutter 2 Firebase Firestore, Flutter Cloud Firestore, flutter tutorial, firebase, flutter

Id: WuYOGBEOEOo

Length: 17min 30sec (1050 seconds)

Published: Sat Jun 12 2021