Flutter & Firebase App Tutorial #2 - Firebase Setup

Key Takeaways

okay they're my friends so the aim of the game here is to link up a firebase back end to our flutter up because firebase is going to help us to take care of things like authentication and storing data in a database on the backend and so we need to link up our flutter application that we're creating to this firebase back-end so we're going to go through that process in this video now the first thing you need to do is go to firebase google.com and then create a free account once you've done that click on go to console and this is going to list your current projects I've already got two but if this is the first time you've created an account you won't have any yet you want to create a new project by clicking add project and the first thing we need to do is give our project a name now just a word of warning firebase does like to change the design of its website weekly it seems in my case but it doesn't mean that the service has changed it just means that it's changing the UI so you might see something different but the process is going to be very similar but anyway we need to give this project a name I'm going to call this ninja brew crew and then continue and then down here you can uncheck that because we don't really need analytics and then create the project this is just going to take a minute or so to create this project for us okay then so once that's done click on continue and you're going to see this kind of like a control area for your firebase container or firebase project so we have all of these different links on the left to setup different features of our 5x back end things like authentication or the database or storage etc and we also have these options right here to setup a new app for this back-end so we do want to do that we want to set up a new Android app for our back-end so let's click on this Android icon right here and we need to give this first of all a package name now if you've used Android studio to create a new flutter' application in the past then when you create that you have to specify that package name at the start and it's going to be that value but in vs code we didn't do that it automatically creates this value forest but you can find it it's inside the Android then go into up and then open build.gradle and you're gonna see if you scroll down this thing right here application ID let me just zoom in a little bit so you can see this and this thing right here this is the application ID value so at the minute we can see that this is comp doctor net ninja recruit but I have actually entered that in here manually now for you it should be something like calm down example dots whatever you called your app so just change the example bit to your name or your website or something like that it just has to be unique what I'm going to do is copy this value right here and then I'm going to paste it into this field and that is going to be our package name now we have to give this a nickname well it's optional but I'm going to give it a nickname of brew crew like so oops there we go and then this bit right here we don't need to fill in because we're not going to be using Google signing off phone number support so we can just register the app like so and then the next step is to download this Google services JSON file this is a file we're going to place in our project in this folder structure so that when our project starts in the emulator or on the phone then this Google services dot JSON file is going to tell that project what back-end to connect to on firebase it's gonna act as like an identifier so it knows to connect to our back-end right here so make sure you download that and then it should only take a second to download when it does just grab it and you want to paste it over here inside your project now we takes the inside this app folder right here so just grab it and scoot it over to this app folder inside the Android folder right there okay so that's the first step taken care of now let's carry on go to next and now we need to add a couple of snippets to some different files in our project as well now at this point I want you to make sure that you use exactly the same version numbers as me because when you're setting up firebase in a flutter out there are certain things that and go wrong with different versions of different things but if you use all of the same versions of everything that I use then hopefully that's going to minimize that risk so first of all we want to place this thing right here this particular class path inside our build the Gradle file in the project route so let me copy this and go to our project now we have a build up Gradle file right here but it's not in the project route so let's just get rid of this app thing right here and you want to go down to this build.gradle thing right here this is the one we want to add it to so inside dependencies just paste this in now I'm gonna change this to 4.0.1 that is the version that we're gonna go with in this series now there could be slight problems if you use a different version because sometimes like I say when you setting up firebase with flutter different things can conflict with one another so if you want to make sure there's no problems make sure your version is the same as mine 4.0.1 okay so let's move on the next thing we need to do is grab this thing right here this plugin so copy that and we need to add that at the bottom of this file inside the project then the app then build up Gradle so this time around we want to go into the app folder then build up Gradle and we want to come to the bottom and we want to paste that in or right at the bottom right here so this time it's this build up Gradle and not the other one so make sure you get those the right way around I'm gonna save this and in fact I'm just gonna scroll up and I'm gonna change the minimum SDK version as well to 21 so we're not going as far back into the past with our support so make sure you do that as well this dates back to around about 2014 I think version 21 so it does go back a fair few years so now if we save that I want to open up my main file if I can find it in all of this mess now so open that up then I'm gonna click f5 to run this like so which is cross that off and then when it's ready it'll open up inside this emulator so at the minute we just want to make sure that everything is still working and that is a good sign if you get some errors it means you've probably done something wrong at some point but hopefully fingers crossed this should run with no errors okay and the app works with who so that means that we've kind of set everything up correctly and if you just open your console and go to debug console as long as there's nothing kind of red in here then you should be fine to carry-out so we're kind of halfway there now we've now connected our flutter application with firebase as a back-end so now we're free to start communicating with that back-end but in order to do that properly we're going to have to now install a couple of flutter packages so that we can interact with the firebase backend appropriately in a flutter application so the first thing I'm going to add is this thing right here firebase earth so if we go to installing we can see right here we want to grab this thing firebase auth copy that take note with the version number that's what I'm using and I can minimize that then if I go down to this thing over here and go to the pub spec gamma file we want to scroll down to our dependencies and at the bottom of those we can just add in firebase auth now the next package I want to install is the cloud fire store so let me zoom that over here go to installing and grab this thing I'm going to copy that and cross it off and I'm going to paste that underneath here and save it and if we now refresh we can see it's getting those packages if we now refresh hopefully everything should still be working the same and I can see everything still works and in the debug console we see no errors so there we go my friends now we have firebase setup for our application so that we can start to interact with it on the backend there's actually one more thing we need to do in this video and that's just to go back to our firebase console and finish this setup so click Next right now and then click on continue to console and now we can see this blue group up right up here so that's all sorted now so in the next video what I want to do is just take a step back so that we can have a bit of a bird's-eye view of how we're going to structure our application and talk about what different widgets we're going to use and where so we'll talk about that in the next video