Flutter with Firebase

Bring super powers to your Flutter app with Firebase

Photo by Balázs Kétyi on Unsplash

Two months ago, I spotted the opportunity to go into flutter development, on the mobile side.

After two months of development, my app landed to the Google Play store(not App store) and got a lot of positives reactions and feedbacks, also a press article. My app is useful for the community of my territory, helping them to avoid remembering tedious stuff about their recycling garbage collection and helping them with maps to avoid restricted parking area. Till today, this things are only some text on a site and so I did my job: spot a problem, think a solution, digitalize and automate information.

My app has no charge to download it, but, when you reach a good users base, you become responsible for giving them a good service, although is for free.
As I am a big fan of rush development to go on the market, after release I immediately started a refactor process plus some improvements.
One of the biggest improvement I'm doing is to tie the app to the Google Cloud Platform. My choice from the suite is Firebase.

Photo by Kevin Ku on Unsplash

Firebase can give like super-powers to your app.
If you do the right tweaks, you can control a lot of your app from a realtime database and maybe also avoid new app update publishing process,
leaving the update publishing only to some feature strictly tied to the platform or the breaking changes of functionality or features.

Before start, let's assume you have already did the setup for a Firebase Project and a working Flutter app

If you don't have a project on firebase yet, don't worry. Now, it's really very easy, and Google is pushing a lot Flutter so you can find a fresh new documentation on how integrate flutter with the google cloud platform products, so go for the Google doc.

Get ready these things on your machine

Install firebase-cli (or update it)

If you do not have installed the firebase-cli in your system yet, it is really super fast

$ npm install -g firebase-tools

Important: maybe your firebase-cli needs to be updated if you already have it installed.

Install global FlutterFire-cli

Run the command in the project root dir

$ flutterfire configure — project=your-project-name

Important: if you run some weird errors, be sure to have an updated version of firebase-cli

The command above will bring a lot of stuff and config to your project

Install firebase_database plugin

This tutorial will use the firebase_database plugin, a plugin related to the firebase realtime database.

flutter pub add firebase_database

Initialize

To initialize Firebase, call Firebase.initializeApp from the firebase_core package with the configuration from your new firebase_options.dart file:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
// …
void main() async {
   ...
   ...
   await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
   );
}

Then, add and begin using the Flutter plugins for the Firebase products you’d like to use in your project between a list.

The Idea

The main idea is the following:

Inside the app there is a Settings section with a list of available items
and I want to hide or display some of the items controlling them with entries in the firebase database.

This list of available items could be enabled or disabled by an entry in the firebase database, or, better, if you want, you can hide or display any items from that list.
In this case I want to hide or display the Notifications settings item.

Firebase entries

I have a settings key containing a enabled_sections key which contains notifications value.
By changing true/false/true, this will render or not the Notifications item in the Settings Screen of the app.

And this was the Firebase side.

How to use this on the Flutter side?

Let's start with the settings lists

How do we achieve our goal? Streambuilder!

We have a ListView with a ListTile childrens list

We must change the ListTile on rows 120–133 from this

to this

Basically we are wrapping our ListTile with a Streambuilder.

The streambuilder build the widget children only after he gets the stream specified for his property stream.

FirebaseDatabase.instance.ref(‘settings/enabled_sections/notifications’).onValue

(Notice the path to the value we need)
This returns a stream bound to the value inside the database.

It means

Once you have the value…do the followings…

so in the builder property, we have the builder function with two input parameters, the context and the snapshot. Inside the snapshot we have the value we were waiting for.

You can do some check like
We have data?
We have error?

If we have data, we have a value?

Based on your value, you can return a widget like the ListTile or if the value is negative you can return an empty widget.

Conclusion

This was a simple one but you can go deep with more complex scenarios, like controlling an entire slice of the applications just changing a value on database and get instantly changes reflected in your app, without your users coud notice it.