How to set up Flutter and Firebase for Android & iOS (2021)Feb 21, 2021
Hey everyone! Today I’m going to teach you how to integrate Firebase into your Flutter projects for Android and iOS step by step.
Head over to https://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.
Enabling Google Analytics will give you access to all of these features.
Select your Google Analytics account.
Once you tap 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_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 defaultConfig section and change our applicationId.
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 ensure 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 applicationId in all our AndroidManifest files and MainActivity.kt. We can do this by using the Find and Replace tool in VSCode.
While we’re here, I’m also going to set my minSdkVersion to 21. This is so I don’t have to manually add multidex, as it’s included in the version 21 and up. If you need to support versions below 21, take a look at the Firebase Flutter docs on how to add multidex 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 download a file called google-services.json and add it to our app folder in the android directory. This google-services file is a configuration file that links our Android app with Firebase.
Let’s drag this in, and double check that the name is exactly google-services.json. If you have multiple google-services.json files, you may see a (1) or (2) 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 of our android directory’s build.gradle, make sure that Google’s Maven repository is present in both the buildscript and allprojects’s repositories.
And then add the google services classpath. Your version number might be different than mine in the future and that’s completely fine. Use the updated version.
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, skip ahead to the next section as you will not be able to link your iOS app and Firebase.
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 app’s bundleID by opening up our iOS project in Xcode. In VSCode, you can do this by right clicking the ios folder and selecting Open in Xcode.
Make sure the Runner and the General tab are selected and then you can view the Bundle Identifier. Change your bundleId 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.
After you input your bundleId, 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, and click Finish.
The file name is GoogleService-Info.plist. Check that your file name matches this exactly. We can finish up our iOS app setup 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 writing and reading data to and from 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 on 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 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.initializeApp();
We have to import firebase_core, and we also have to call WidgetsFlutterBinding.ensureInitialized() before calling Firebase.initializeApp(). 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 AppBar.
A FloatingActionButton has an onPressed() that calls
The child is an add icon. Whenever the user taps this button, a new document with the current date will be added to the “testing” collection in Firestore.
The body of our Scaffold is a StreamBuilder that gives us a stream of QuerySnapshots. If the snapshot does not have data, we return a shrunken SizedBox. Otherwise we return a ListView.builder with itemCount: snapshot.data.docs.length and return the 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 Podfile.
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!
Pro Tip #1: .gitignore
If you’re planning on committing your project to a public Git repository, make sure you add these two lines to your .gitignore.
These lines will ensure that your google-services.json and GoogleService-Info.plist are not committed to version control, so random people online can’t start writing to your database.
Pro Tip #2: Add budget alerts
When you move to a Blaze Plan, you should definitely set up some budget alerts.
In your Firebase Project, go to Usage and billing, Details & settings, and then create a budget alert set to your desired amount.
The alerts will notify you when you’re approaching or exceeding your planned 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, 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.
Get notified about new courses and updates