Geek Culture
Published in

Geek Culture

Using Firebase in your Flutter Apps | Setting up everything

Guide to integrate the firebase in your flutter apps

Credits: Myself

In this series of articles, I’ll help you integrate firebase into your flutter app to make it production-ready.

In this particular part, we’ll set up the new flutter project and connect it to a firebase project, set up everything for both android and iOS.

Adding the dependencies

Let’s start by adding the firebase dependencies to pubspec.yaml file. Scroll down to the dependencies section.

Note: Add these to the “dependencies” section, not the “dev-dependencies”. Learn about the difference here.

firebase_core: "^1.2.1"
firebase_analytics: "^8.1.1"

The first dependency is the core firebase dependency and I’ve included the analytics dependency too because it’s so important to use analytics if you’re planning to publish this app to the app stores. This not only gives some fancy-looking graphs about your userbase but also provides you information on how is your app being used by your users.

Ahh! Also, add crashylitics dependency which helps you find and fix bugs in your apps.

firebase_crashlytics: "^2.0.5"

Now, that you’ve added firebase dependencies, we need to sync these dependencies in our project.

  • Use the terminal in vs code to execute “flutter pub get”.
  • If you have dart extension installed, Open command pallette (Command/Ctrl + shift + p) and search for “Dart: Get Packages”.

Both of these do the same thing, you can choose whatever you’re comfortable with.

Setting up Firebase Project

Now, let’s head to the backend for a bit. Log in to your firebase console and create a brand new project.

Now, let’s create a new iOS app in your project.

Creating an iOS app in firebase

You want to make sure that you choose something that makes sense as the package name because that’s not something you can change easily later, especially if you already deployed your app to the store.

Downloading the plist file

Now, download the plist file and keep it in a place where you can find it when needed.

Similarly, also create an android app reference in your firebase project.

Android app setup

Now, if you want to use google authentication phone auth provided by firebase. You’ll need to add the SHA-1 certificate to your console.

Read the official documentation to create it here

To get the debug certificates which you might want to use when debugging the app. You can read an article written by me :

After you get the certificate, just paste it to the console and click continue.

GoogleServices.json

Download the google-services.json and keep it at a place that is easily accessible we’ll need it on the way.

Setting up iOS project in Xcode

Start by opening your project/ios in xcode.

Flutter app in Xcode

Once you opened it and xcode processed the project. Select Runner in the files panel and you should see something like

Here you can change your bundle id in Xcode

Make sure you use the same bundle id that you’ve used in the firebase console and add the name for your app.

Then add the GoogleServices-Info.plist file to the Runner folder in your app :

And that’s it for the iOS app and now you can successfully build and run your app on iOS emulator or physical device either from Xcode or flutter run.

Setting up Android App

Unlike iOS setup this is a bit complex. Firstly, add the google-services.json that you’ve downloaded earlier to the android/app folder.

google-service.json

Now navigate to the project level build.gradle file which stays at android/build.gradle.

Project level build.gradle

And add the below dependencies to the dependencies section the the file :

classpath 'com.google.gms:google-services:4.3.5'
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.5.1'

And then navigate to the app level build.gradle file which stays in “android/app/build.gradle”.

app-level build.gradle

Add these plugins to the section above android tag :

apply plugin: 'com.google.gms.google-services'apply plugin: 'com.google.firebase.crashlytics'

Check your app package name that it matches to the one you used in firebase console and also add

multiDexEnabled true

to the default config section.

Learn more about multi-dex and why is it important to be added :

https://developer.android.com/studio/build/multidex

Now scroll down to the dependencies section and add the below dependency to complete the setup.

implementation 'com.android.support:multidex:1.0.3'

That’s all you’re done, now you can build and run your app on android emulator or a physical device.

If this didn’t help you, there is a quite a good book called Practical Flutter by Frank Zammetti.

Hope this guide helped you set up the firebase in your app. If it did, don't forget to clap or support my work. If you face any kind of issues or find something wrong in this guide feel free to comment down below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store