Step-By-Step Guide To Add Firebase Services To Flutter App

Are you someone who is working as a mobile app developer for a long time? Then, you must be having an idea about Flutter. It is a mobile app development framework developed by Google. With the help of this framework, you can develop applications for Android as well as iOS.

In recent times, Flutter has gained popularity among the developer community. Therefore, it becomes essential for all of you to have knowledge about the latest things happening in the field. It will help you to become standout from the rest of the people in a highly competitive market.

In this blog, we’re going to provide you with a step-by-step guide to add Firebase services to the Flutter app. As you know, Firebase is one of the most versatile & powerful platforms for building mobile apps. With the help of this platform, you can add many features in apps.

Now, if you want to access the Firebase platform while using Flutter framework, you need to make use of FlutterFire. It’s a plugin of Flutter for Firebase. So, with the help of this plugin, you can add the Firebase services to the Flutter app. Let’s analyze that aspect in detail, right now.!

Prerequisites

For using the services of Firebase services to Flutter app, you will require:

• Android Studio 3.1.3 or higher
• Google Flutter SDK 0.9.4 or higher
• Google Flutter plugin 29.0.1 or higher
• A Firebase account
• A device running Android API level 23 or higher

Adding Firebase Services To Flutter App

Step 1: Preparing A Google Flutter Project

First of all, you need to prepare a Flutter project. For that purpose, move to Android Studio and create a new Flutter project. Make sure you opt for the Flutter Application option. Also, validate the app with a package name, as shown in the screenshot below.

Remember one thing that you can’t use the Firebase services before you register it and link it with any project. There are two ways to perform this thing - (a) manually using the browser & (b) using Android Studio's Firebase Assistant. The later takes less time as well as effort.

Now, move inside the Flutter project and navigate to Tools > Flutter > Open for Editing in Android Studio. Here, you will be asked to open the project. Make sure you open it in a new window. In a new window, navigate to Tools > Firebase for opening Firebase assistant.

Now, move to Analytics > Log an Analytics event and press the Connect button. Here, you will see a dialog box that will ask you name the Firebase project. So, type the name and press ‘Connect to Firebase’ button as shown in the screenshot below.

Now, the registration process will get completed. So, add the google-services.json file. It comprises configuration details.

For reading the JSON file, you’ll require the Google Services plugin. Now, open the build. gradle file and add classpath of the plugin inside the dependencies section.

classpath 'com.google.gms:google-services:4.0.1'

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

Activate the plugin by adding the following lines of code in the build.gradle file.

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

Now, close the window and come back to the Flutter project.

Step 2: Adding Dependencies

The FlutterFire has a plugin for most of the Firebase services. For adding this plugin as a dependency, you need to mention them in the dependencies key of pubspec.yaml file. For that purpose, you can utilize the following coding snippet.

firebase_analytics: ^1.0.3
cloud_firestore: ^0.7.3
firebase_ml_vision: ^0.2.0+1

Here, we will be creating an app that can scan QR codes. So, the database will get saved in the cloud. We will use the ML kit for QR code decoder and Cloud Firestore plugin for a database.

Now, for handling the QR codes, you will require Image Picker. Here’s how you can add it as a dependency.

image_picker: ^0.4.10

After that, click Packages get button and install all the packages.

Step 3: Using Firebase Analytics

Generally, you don’t have to write a piece of code for using Firebase Analytics in Flutter application. If you didn’t encounter any errors, you could see events popping up in StreamView panel of analytics as shown in the screenshot below.

Step 4: Using Firebase ML Kit

The Firebase ML Kit is a service of Firebase. It allows you to detect faces, scan barcodes, and perform OCR. Flutterfire plugin offers an intuitive API. Now, let’s use it to decode QR codes.

You can make use of Flutter for the Cross-Platform App Development. You can use Flutter with Firebase services as well. That is the reason why it has gained popularity among the people.

For decoding the QR code, create a layout that comprises a button to capture photos. For creating a Material Design Layout, you can use the following coding snippet.

void main() => runApp(new MaterialApp(home: new MyApp()));
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
 
            // More code here
 
          },
          child: new Text("Capture QR Code")
        )
      )
    );
  }
}

If the app runs properly, the output will be as shown below in the screenshot.

Now, the button has an on-press event listener. Inside the listener, one can use the pickImage()method of ImagePicker class. It will help you capture a photo. For attaching a listener, use the following code.

ImagePicker.pickImage(source: ImageSource.camera).then((photo) {
  // More code here
});

After capturing the photo, you should pass it to ML Kit’s BarCodeDetector class. To get an object of the class, use barCodeDetector()method of FirebaseVision class.

The ML Kit supports various types of barcodes. So, for making the decision making accurate, you can make use of BarCodeDetectorOptions object to specify the type of barcode.

Here’s how you can create a detector for QR codes:

BarcodeDetector detector = 
          FirebaseVision.instance.barcodeDetector(
            BarcodeDetectorOptions(
                barcodeFormats: BarcodeFormat.qrCode
            )
          );

Now, there’s a twist in the tail. The detector won’t be able to handle the images directly. Thus, you need to convert the photo into the FirebaseVisionImage object using the fromFile()method. The method runs asynchronously. So, you need to attach a listener to it.

detector
      .detectInImage(FirebaseVisionImage.fromFile(photo))
      .then((barcodes) {
        // More code here        
      });

In the listener, you’ll have to access a list of Barcode objects. The rawValue field of each object comprises raw data. Now, create a simple AlertDialog widget having a Text widget for title & content and a FlatButton widget. Here’s how you can achieve this thing.

if(barcodes.length > 0) {
  var barcode = barcodes[0]; // Pick first barcode
 
  // Create Alert Dialog
  showDialog(context: context, builder: (context) {
    return new AlertDialog(
      title: new Text("QR Code Contents"),
      content: new Text(barcode.rawValue),  // Show raw value
      actions: <Widget>[new FlatButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: new Text("OK")
      )],
    );
  });
}

After using the code, if you run the app, you will get the output as shown below.

Step 5: Using Cloud Firestore

Cloud Firestore is a NoSQL database. You can use this facility to store the app’s data in the cloud. The FlutterFire plugin allows you to perform CRUD operations.

Now, manually enable Cloud Firestore service in the Firebase console. For that purpose, navigate to the Database section and press the Create Database button.

Here, you need to define the security rules. For that purpose, choose Start in test mode option.

Now, press the Enable button which will create a database. In the Android Studio, you can get a reference to the database by using the instance field of the Firestore class.

var myDatabase = Firestore.instance;

Whenever you’re using the Cloud Firestore, you should store all the data inside the documents. Each document must refer to a collection. For that purpose, you can use the collection() method. Once you have access to a collection, you should utilize the add() method.

Now, you need to have an idea of how to create a document that comprises the QR code’s raw value. For that purpose, you should use the following coding snippet.

myDatabase.collection("qr_codes").add({
        "raw_data": barcode.rawValue,
        "time": new DateTime.now().millisecondsSinceEpoch
      }).then((_) {
        print("One document added.");
      });

ble to see the content inside the Firebase console as shown in the screenshot below.

Conclusion

Nowadays, when the Flutter framework is making all the right noise, it becomes essential for all the business owners to be aware of all its functionalities and features.

Taking this idea into consideration, here we have tried to provide you with a step-by-step guide on adding Firebase services to Flutter app, which will prove beneficial for any Mobile App Development Company who wants to work with Flutter framework.

We hope you had a great time reading this article. If you’ve any questions or suggestions related to this blog, then feel free to ask them in the comment section. Thank You.