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:

integrate-flutter-firebase-example-create-firebase-project

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:

integrate-flutter-firebase-example-register-firebase-app

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:

integrate-flutter-firebase-example-configure-android-get-package

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

integrate-flutter-firebase-example-get-sha-1

Click on Register App, the site shows next step:

integrate-flutter-firebase-example-configure-android-download-google-services

Add config file

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

integrate-flutter-firebase-example-configure-android-add-service-json

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'

integrate-flutter-firebase-example-configure-android-add-plugin

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
   }
}

integrate-flutter-firebase-example-configure-android-add-dependency

Check with Firestore

Setup Firebase Cloud Firestore

Open Firebase Console, and select your project.

Under Develop, select Database:

integrate-flutter-firebase-example-configure-android-enter-database

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

integrate-flutter-firebase-example-configure-firestore-rules

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:

integrate-flutter-firebase-example-firebase-firestore-add-item

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:

integrate-flutter-firebase-example-result

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

Source Code

flutter_firebase

0 0 votes
Article Rating
Subscribe
Notify of
guest
51 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments