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