Add Firebase to Flutter
Firebase is a great backend solution for anyone that wants to use authentication, databases, cloud functions, ads and countless other features within an app luckily for us, Flutter has official support for Firebase with the FlutterFire set of libraries.
This article shows all the steps required to build a skeleton app in Flutter with Firebase.
Google’s Flutter SDK can be used to develop apps that give native UI experience for both Android and iOS platforms. To write apps using Flutter, you have to use Dart programming language.
- Firebase Realtime Database is a cloud-hosted database with data stored as JSON.
- It provides backend database with secure access to build rich, collaborative applications directly from the client-side.
- Data is persisted locally on the device while offline and realtime events continue to fire giving responsive experience to the end user.
- When the device regains connection to the internet, the realtime backend database is automatically synchronized with local data changes that occurred while the client was offline while auto-merging any conflicts.
No matter what both the technologies have made lives of developer easy. The scope of these products is huge as they cover multiple platforms like Android, iOS and Web. Another common purpose to use Flutter and Firebase is both of these products help in improving the performance of your application and best thing — they’re easy to use. While both of them have made their debut recently, they have gained popularity in no time and are trusted by the largest apps.
First lets see….What is Firebase?
- Firebase helps build faster apps, without managing the infrastructure.
With Firebase functionality like analytics, databases, messaging and crash reporting you can enhance the app quality and monitor performance. - It helps to build, improve and grow applications for multiple platforms.
Just like Flutter can be used to develop applications for multiple platforms, Firebase products work great individually but share data and insights, so they work even better together.
Weaving Firebase with your Flutter application:
This will be a good read if you have some background about Flutter or have made your hands dirty with Flutter before. I’m going to speak about three primary features of Firebase: Authentication, Database and Storage. If you get a hold of these three features, you may be able to build a complete dynamic application with user authentication and managing user transactions.
Create Firebase Project
As we’re dealing with iOS and Android platform(s), we’ll have to go through the setup process for both. Let’s start by ensuring we’ve got a Firebase project created over at https://console.firebase.google.com.
- STEP 1: Creating a New Flutter Project
In order to follow along with the setup we’ll be creating an example Flutter app. Assuming you already have the Flutter and Dart SDKs installed, run the following in your terminal:
- # New Flutter application
$ flutter create flutter_firebase
- # Open this up inside of VS Code
$ cd flutter_firebase && code .
Now that we’ve got a Flutter project up and running, we can add Firebase.
- STEP 2:
Next up, we’re given the option to enable Google Analytics. It isn’t directly necessary for what we’re trying to do, so do whatever feels right for your use-case here.
Assuming that we’re using Google Analytics, we’ll need to review and accept the terms and conditions prior to project creation.
After a relatively painless setup process, we should now be navigated to the dashboard for our project.
- STEP 3:Adding Android support
- Register app
In order to add Android support to our Flutter application, select the Android logo from the dashboard. This brings us to the following screen:
The most important thing here is to match up the Android package name that you choose here with the one inside of our application. The structure of this is done like so: com.example.app.
Once you’ve decided on a name, head over to android/app/build.gradle and update the applicationId to match this:
defaultConfig
{
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId “io.vivekmedium.myapp”
}
You can skip the nickname and debug signing keys at this stage. Select “Register app” to continue.
- Download config file
The next step is to add the Firebase configuration file into our Flutter project. This is important as it contains the API keys and other critical information for Firebase to use.
Select “Download google-services.json” from this page.
Once you’ve got this, take the file and place it inside of the android/app directory within the Flutter project.
- Adding the Firebase SDK
We’ll now need to update our Gradle configuration to include the Google Services plugin. Open up android/build.gradle and modify it to include the following:
buildscript
{
repositories
{
// Check that you have the following line (if not, add it):
google() // Google’s Maven repository
}
dependencies {
…
// Add this line
classpath ‘com.google.gms:google-services:4.3.2’
}
}
allprojects
{
…
repositories
{
// Check that you have the following line (if not, add it):
google() // Google’s Maven repository
…
}
}
Finally, update the app level file at android/app/build.gradle to include the following:
apply plugin: ‘com.android.application’
dependencies
{
// add the Firebase SDK for Google Analytics
implementation ‘com.google.firebase:firebase-analytics:17.2.0’
// add SDKs for any other desired Firebase products
// https://firebase.google.com/docs/android/setup#available-libraries
}
…
// Add to the bottom of the file
apply plugin: ‘com.google.gms.google-services’
With this update, we’re essentially applying the Google Services plugin as well as looking at how other Flutter Firebase plugins can be activated such as Analytics.
From here, run your application on an Android device or simulator. If everything has worked correctly, you should get the following message in the dashboard:
Next up, let’s add iOS support!
- STEP 4: Adding iOS support
In order to add Firebase support for iOS, we have to follow a similar set of instructions.
Head back over to the dashboard and select Add app and then iOS icon to be navigated to the setup process.
- Register an app
Once again, we’ll need to add an iOS Bundle ID which I’m keeping the same as Android for consistency:
You’ll then need to make sure this matches up by opening the iOS project up in Xcode at ios/Runner/Runner.xcodeproj and changing the Bundle identifier under General.
Click “Register app” to move to the next screen.
- Download config file
In this step we’ll need to download the configuration file and add this to our Xcode project.
Download GoogleService-Info.plist and drag this into the root of your Xcode project within Runner:
WARNING: It’s important that you don’t simply drag this into the folder without going through Xcode, as this will not work.
That’s it! You’ll also be happy to know that we can skip the rest of the steps from here on out.
Add Firebase plugins:
Flutter uses plugins to provide access to a wide range of platform-specific services, such as Firebase APIs. Plugins include platform-specific code to access services and APIs on each platform.
Firebase is accessed through a number of different libraries, one for each Firebase product (for example: Realtime Database, Authentication, Analytics, or Storage). Flutter provides a set of Firebase plugins, which are collectively called FlutterFire.
Since Flutter is a multi-platform SDK, each FlutterFire plugin is applicable for both iOS and Android. So, if you add any FlutterFire plugin to your Flutter app, it will be used by both the iOS and Android versions of your Firebase app.
Adding the FlutterFire plugin, step by step:
- From the root directory of your project, open the pubspec.yaml file and add the following code :
dependencies:
flutter:
sdk: flutter
# Add the dependency for the Firebase Core Flutter SDK
firebase_core: ^0.4.0+9
2. Add the plugin for the Firebase feature you want to use in your app
Dependencies:
flutter:
sdk: flutter
# Check that you have this dependency (added in the previous step)
firebase_core: ^0.4.0+9
# Add the dependencies for the Firebase products you want to use
in your app
# For example, to use Firebase Authentication and Cloud Firestore
firebase_auth: ^0.14.0+5
cloud_firestore: ^0.12.9+5
3. Run flutter packages get.
Yay, take a bow!!! You have successfully introduced Firebase to your Flutter app.
Concluding this I would say…
We’ve now learned how to set up our Flutter applications to be used with Firebase in the near future. In future articles we’ll look at how to use Firebase features such as Cloud Firestore, Authentication, Analytics, and more with Flutter.
I tried keeping simple for the users. Hope you all got a brief idea about the Firebase. By following these steps it would get easier for u to implement firebase. Constructive ideas are always welcomed.
If you enjoyed this blog, let me know in the comments below how much useful this blog was to you. I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!
#HappyCoding #flutter #widgets #crossplatform #tutorial #firebase #viveky259 #procoach
