Firebase is a platform developed by Google for creating mobile and web applications. Developer can use its priced plans, yet, still use free service for making simple prototypes too. Firebase provides authentication, database and rules for database. You can connect single database, ‘Cloud Firestore’, to the several apps such as one web app, one android app  and one iOS app. In my case I developed my web app first with Firebase then wanted to make its android version with Flutter. I want to explore its journey and leave this article to share my experience with the world!

I made this plans for article series in this order. This article we are talking about Installation and Setting up for Firebase.

  1. Installation and Setting up
  2. CRUD in the Flutter app
  3. Auth in the Flutter app

https://poianakim.github.io/quotes/#/

This is my web application which you can share your favorite ‘quotes’. When you share it with the world, it is saved in Firestore. Users can register in the site or sign in also with Google or Github account, meanwhile users can register simply with an e-mail address too. And all this backend related stuff developers can control from FireBase’s console.

Setting up Firebase for a Flutter application

https://console.firebase.google.com/u/0/

If you want to start firebase installation for the first time, you can start by clicking ‘Create Project’ Button.

No pre existing project in console
You can give a name for your new Firebase project

In my case I already have ‘QUOTES’ project. You can see two icons which are one for Android app and the other for web apps. Because I already connected Firebase project to my android application. If you connect same project to other iOS project, you will see iOS icon besides two other icons.

Already existing project in my Firebase console
Already existing project in console

Let's  be back to the situation that it's your first time to create Firebase project. To add Firebase to your Android app, you need to follow several steps. Firebase console guides you with their official documentation, however, I had some errors while following it. So I share how I did in my real situation with you.

  1. Register App

You need to input android package name. You can check it from your android/app/build.gradle. In this file, inside of defaultConfig, applicationId is your Android package name. Once you typed it and click ‘Register App’ It derives you to the next step.

defaultConfig {
		...
        applicationId "com.example.quote_flutter"
            }

2.  Download Config File

After you register app name, FireBase prepares you google-services.json file. You can locate this file to the same android/app directory.

Save google-services.json file in android/app director

You can add this some lines for google-services  and in ‘dependencies’ for the  implementation of Firebase.

...

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

...

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation platform('com.google.firebase:firebase-bom:29.3.0')
    implementation 'com.google.firebase:firebase-analytics'
    implementation "androidx.multidex:multidex:2.0.1"
}	

If you skip multidex implementation line implementation "androidx.multidex:multidex:2.0.1" , when the Android API under 20 version, you will have an errors when building starts, because method is over 64k. Once you add implementation for multidex in dependencies, you need to add other lines to enable multidex  defaultConfig.  At the end, the file looks like this. In my persona try, I was not provided 'multiDex' information from Firebase console so I had an error because of it.

defaultConfig {
	applicationId "com.example.quote_flutter"
	minSdkVersion 19
	targetSdkVersion flutter.targetSdkVersion
	versionCode flutterVersionCode.toInteger()
	versionName flutterVersionName
	multiDexEnabled true
}

You need not only modify depenencies from build.gradle of android/app directory level but also need to modify build.gradle of project root directory for google() in build script and google-services in dependencies.

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
    	…
    	google()
    }

dependencies {
    …
    classpath 'com.google.gms:google-services:4.3.10'
    }
    }
    allprojects {
        repositories {
        …
        google()
        }
}

Once you are done with this step, you are ready to make and connect with the database ‘FireStore!’

Create Data Base

When you go back to the console, from the nav bar on the right side of the screen, you can find ‘Cloud FireStore’. From here, you can create new database by clicking ‘Create database’.

In my case, I already have database for the site. For someone who needs to create DB,  I suggest you to start in test mode to enable quick setup yet it’s recommended to modify rules within 30 days to have for long - term use.

To simple tutorial course, you can choose 'test mode' and change it within 30 days

After setting secure rules, you can choose Firestore location as you need to set. You can read from warning message, it’s impossible to change location later so choose a location setting you really need to use. Once you create DB, now you can add data from console. Each database you can organize with different collections.

For some of you who want to start a  new collection, you can set its name as you see from the screenshot, you can create a new collection and add documents manually from your console. You can choose data type also Firestore provides you automatically document unique ID.

Once you create your collections and add some documents and fields into it, you will see some similar screen like a following screenshot.

In my case, I already have documents in my collection which sent from 'Quotes' web application. There are three collections each name is fav-author, profiles, quotes.  

You can check there are several fields. author, comment, quote, title fields are having String type of data. I have createdAt data to view saved quotes in the screen its created timing value. From the web app version users can save their quote data with its page information also so page field has number value. You can still modify fields and documents from the console while developing it.

It was a short journey to install the environment for connecting your Firebase to Flutter Android application. The real deal will be when you actually create, read, update and delete the data from your mobile front side.

In the next article, I will share how I CRUD my Firestore documentations with my Flutter app screen!