Flutter Firebase Setup Android & iOS Tutorial 2021

hey everyone welcome back to the channel i'm marcus eng and today i'll be teaching you how to integrate firebase into your flutter projects for android and ios if you enjoy the video remember to leave a like and subscribe and check out the full write up and my flutter firebase courses on launchclub.io and with that let's get right into it head over to firebase.google.com and click on get started this opens up our firebase console where we can tap on create a project to start creating our firebase project i'm going to name this project firebase example but you can name it anything you want enabling google analytics will give you access to all these awesome features select your google analytics account i'll be using my default account once you tap on create project your project will take a moment to set up and now we're in our firebase project in the left sidebar we have access to all the different firebase features such as authentication cloud firestore storage functions and more before we create our ios or android project we need to create our flutter project you can create a new project with me or use an existing flutter project i'll name my project firebase underscore example now let's head back over to our firebase console and tap on the android icon to register our app we need to give the package name of our application we can find this by going into our file tree and finding the build.gradle file it's important to note that there are two build.gradle files one in the top level android folder and one in the app folder we want to go into the one in the app folder let's scroll down to the default config section and change our application id an application id is a unique identifier for your android app android devices and the google play store both use this id to identify your app so it's important to make sure your application id is unique and that you never change this once you upload your app to the google play store people normally insure this by using reverse domain name notation let's say your app is called cool and your website is company.com your application id would be com.company.cool in my case my website is launchclub.io and the name of this app is firebase example so my application id is io.launchclub.firebaseexample we also need to update our application id in all of our android manifest files and main activity.kt we can do this by using the find and replace tool in vs code while we're here i'm also going to set my min sdk version to 21. this is so i don't have to manually add and enable multi-decks as it's supported in version 21 and up if you need to support versions below 21 i'll leave a link in the description to the firebase flutter docs on how to add multi-deck support manually now go back to firebase and put in your package name if you're planning on using features such as dynamic links or google sign-in you have to add a signing certificate there's more information on this if you hover over the question mark icon but you can always add this later in your project settings click on register app and you now have to download a file called googleservices.json and add it to your app folder in the android directory this google services file is a configuration file that links our android app with our firebase project let's drag this in and double check that the name is exactly google dash services.json if you have multiple google dash services.json files you may see a one or two appended to the end of the file name always remember to delete that next we have to add the firebase sdk to our dependencies inside our android directories build.gradle make sure that google's maven repository is present in both the build script and all projects repositories and then add the google services class path your version number might be different than mine in the future and that's completely fine use the updated version switch to the other build.gradle and add the apply plug-in google services line we've successfully set up our android app in firebase and now it's time to add our ios app if you don't have xcode installed you won't be able to link your ios app with firebase so skip ahead to the next section if you don't have it installed click on add app and select ios just like the android setup we have to provide a unique identifier called a bundle id we can find our ios apps bundle id by opening up our ios project in xcode in vs code you can do this by right-clicking the ios folder and selecting open in xcode make sure runner and the general tab are selected and then you can view the bundle identifier change your bundle id to your unique reverse domain name so apple can identify your app when you're ready to publish to the app store mine will be io.launchclub.firebaseexample once you input your bundle id click register app and download the configuration file drag this file directly into the xcode file tree at the same level as your info.plist in the runner folder make sure that the copy items if needed checkbox is checked this time the name of the file is google service info.plist check that your file name matches this exactly and we can finish setting up our ios app by clicking next and skipping through the rest of this to test both our android emulator and ios simulator with firebase let's create our cloud firestore database click on cloud firestore and create database start your firestore database in test mode so we can immediately start reading and writing data from into the database select your cloud firestore location since i'm in the us i'll choose us central and now we have our database inside of our pubspec.yaml let's add the necessary dependencies you can get the latest versions of all these packages at pub.dev the first package is firebase core for connecting our app to firebase then we have firebase analytics firebase auth and cloud firestore you can always add more packages depending on what products you need in main.dart we need to initialize firebase in our main function main will be asynchronous and call await firebase.initialize app we have to import firebase core and we also have to call widgetsflutterbinding.ensure initialized before calling firebase.initialize app if you don't add this line you're going to get an error telling you to add this line to initialize binding we're going to test cloud firestore's write and read operations let's remove the counter example home is a scaffold widget with an app bar a floating action button has an on pressed that creates a new document with the current date in a cloud firestore collection called testing the body of our scaffold is a stream builder that gives us a stream of query snapshots if the snapshot does not have data we return a shrunken size box otherwise we return a list view builder with snapshot.data.documents.length and return a timestamp value for each document as a datetime string in a text widget let's run the app on both an android emulator and ios simulator one quick note is if you get this error about an incompatible cloud firestore version you can fix it by changing the global platform for ios to version 10.0 in your pod file when the add button is tapped on either device we can see that the documents are streamed back to both devices in real time when we refresh firestore and tap the buttons we also see the documents being created we've successfully added firebase to our android and ios apps if you're planning on committing your project to a public git repository make sure you add these two lines to your docket ignore these lines will ensure that your google services json and google service info plus are not committed to version control so random people online can't start writing to your database when you upgrade to a blaze plan you should definitely set up some budget alerts these alerts will notify you when you're approaching or exceeding your plan costs for the month keep in mind that this is not a spending limit where you cap your spending at a fixed amount per day these are just alerts budget alerts have saved me in the past and so even if you think you don't need them please set them up so you can fix issues immediately and avoid getting a giant bill at the end of the month and that's all for this video if you found it helpful remember to leave a like and subscribe and check out my flutter firebase courses on launchclub.io thanks for watching and i'll see you in the next one

Channel: Marcus Ng

Views: 34,753

Keywords: flutter firebase setup, flutter firebase android setup, flutter firebase ios setup, flutter firebase ios and android setup, flutter firebase 2021, flutter firestore 2021, flutter firebase beginner, flutter firebase beginner tutorial, flutter tutorial for beginners 2021, flutter firebase tutorial 2020, flutter firebase easy, learn flutter firebase, flutter firebase for beginners, flutter 2 firebase, flutter firebase tutorial for beginners, flutter database tutorial, firebase app

Id: LnpGU8vj7TI

Length: 9min 16sec (556 seconds)

Published: Sun Feb 21 2021