Using Firebase in your Flutter Apps | Setting up everything
Guide to integrate the firebase in your flutter apps
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.
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.
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.
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.
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.
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 :
Getting Android Debug Certificates in a Flutter Project
This a short guide on getting the debug certificates which you might need when setting up your android app of your…
After you get the certificate, just paste it to the console and click continue.
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.
Once you opened it and xcode processed the project. Select Runner in the files panel and you should see something like
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.
Now navigate to the project level build.gradle file which stays at android/build.gradle.
And add the below dependencies to the dependencies section the the file :
And then navigate to the app level build.gradle file which stays in “android/app/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
to the default config section.
Learn more about multi-dex and why is it important to be added :
Now scroll down to the dependencies section and add the below dependency to complete the setup.
That’s all you’re done, now you can build and run your app on android emulator or a physical device.
Practical Flutter: Improve your Mobile Development with Google's Latest Open-Source SDK
Explore what Flutter has to offer, where it came from, and where it's going. Mobile development is progressing at a…
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.