How to integrate Firebase into Flutter App – Android Studio

Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this tutorial, we’re gonna go through the steps to integrate Firebase into Flutter App with Android Studio Enviroment.

Create new Flutter app

– Open Android Studio.
– Select File > New Flutter Project
– Select Flutter application for project type, then press Next
– Enter a project name (flutter_firebase for this example), and press Next
– Click Finish

Create Firebase project

Go to Firebase Console, login with your Google Account, then click on Add Project.

Enter Project name, select Country/Region:

Click on Create Project.

Configure Android App for Firebase project

Register App

In the Firebase Console, select Project Overview in the left navigation bar. Click Add Firebase to your Android app to get to this:

So, how to fill these fields?
1- Android package name:
In Flutter app directory, open the file android/app/src/main/AndroidManifest.xml. It’s the value of package attribute:

2- SHA-1 (optional):
If we want to use Firebase Auth or Firebase Dynamic Links, we need Debug signing certificate SHA-1 field.

Now open the terminal and run the code below:
– To get the release certificate fingerprint:
keytool -exportcert -list -v -alias <your-key-name> -keystore <path-to-production-keystore>

– Or to get the debug certificate fingerprint:
keytool -exportcert -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

Click on Register App, the site shows next step:

Add config file

Download the file google-services.json, then move this file into android/app directory of your Flutter app:

Add Google Services Gradle plugin

To enable Google APIs or Firebase services in Android application, we have to add the google-services plugin to build.gradle file.
Open android/app/build.gradle, and add the following line at the last line:

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

In android/build.gradle, add a new dependency inside the buildscript tag:

buildscript {
   repositories {
       // ...
   }

   dependencies {
       // ...
       classpath 'com.google.gms:google-services:4.0.0'   // new
   }
}

Check with Firestore

Setup Firebase Cloud Firestore

Open Firebase Console, and select your project.

Under Develop, select Database:

In Cloud Firestore, select Get Started, then Start in test mode and click Enable:

Add data to Firestore

Our database will have a collection ‘notes’. Click Add Collection and set the collection name to ‘notes’, then click Next.

Add documents to the collection. Each document contains id, title and description fields:

Update pubspec.yaml

Open pubspec.yaml in Flutter Project. Add a dependency for cloud_firestore:

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^0.7.4

Run command: flutter packages get.

Build app & Check result

lib/main.dart:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ozenero App',
      home: const MyHomePage(title: 'ozenero Notes'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: Text(title)),
      body: new StreamBuilder(
          stream: Firestore.instance.collection('notes').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) const Text('Loading...');
            return ListView.builder(
                itemCount: snapshot.data.documents.length,
                padding: const EdgeInsets.all(25.0),
                itemBuilder: (context, index) {
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return Text(
                    '${ds['title']}:\n${ds['description']}\n---',
                    style: TextStyle(fontSize: 18.0),
                  );
                });
          }),
    );
  }
}

Result:

More Practice: Flutter Firestore example – Firebase Firestore CRUD with ListView

Source Code

flutter_firebase