Flutter + Firebase — Pains and Gains
The reputation of rapid app. development with Flutter while using Firebase as database and maintaining single source code to maintain for both Android and iOS led me to find how it works. Now that I have it working, the aim of this tutorial is save others from problems I faced. App is very simple it just shows a value saved in database.
Creating App Create starter Flutter app to increment counter. This is important to create app first because to register app in Firebase Android package name is required and this package name is based on what you provide to app while creating it.
Create Firebase database Create new project in Firebase with free Spark plan. For simplicity and to avoid any issues which I faced when Google Analytics was enabled, disable Google Analytics for this project. Once project is created, create database and ‘Start in test mode’. Database in test mode will be deleted after 30 days but this is good enough to create prototype or while learning how to use it. Choose location of database that is closed to you or your app audience to reduce latency.
This is important to understand how Firebase which is a noSQL database, organises data. At top level there are collections , which contain documents and in the documents there are fields which store data. Collection is similar to table in SQL databases, documents are similar to a row in table and fields inside document are like columns.
This is important to understand that unlike SQL databases in noSQL database there is repetition of data so there is overhead to writing data to noSQL database but since in many applications user of application are reading more data compared to writing so it doesn’t have any negative effect. In short, noSQL databases are optimised for reading data.
Create Android App in Firebase There are few steps involved in creating Android App in Firebase and making sure Flutter app can communicate to it.
- To find package id required to register Android App in Firebase, look for this id inside root directory of flutter app>android>app>build.gradle. Notice that there are two build.gradle files, one inside android folder and other in app folder but the one which contains this id is inside app folder. With this id register your app.
2. Download google-services.json file from Firebase and save it inside rood directory of flutter app>android>app.
3. Add this line to bundle.gradle that is inside root directory of flutter app>android>app
apply plugin: 'com.google.gms.google-services'4. Add this line to bundle.gradle that is in root directory of flutter app>android at the location mentioned in screenshot
classpath 'com.google.gms:google-services:4.3.3'
After making these changes build the project, it should build without any errors.
Create iOS App in Firebase Just like Android app, there are few steps involved in creating iOS App in Firebase and making sure Flutter app can communicate to it.
- To find package id required to register iOS App in Firebase, look for this PRODUCT_BUNDLE_IDENTIFIER which is inside root directory of flutter app>ios>Runner.xcodeproj>project.pbxproj. Notice that this is not same as id used while Android app.
2. Open flutter app>ios folder in Xcode. Download GoogleService-Info.plist file, drag and drop it on drop it on ios>Runner folder. This is important to do it in Xcode so that reference to the file are added correctly. Folder structure in Xcode after this file has been added is going to look like this
3. Even though Firebase asks to make changes to AppDeletegate.m file but leaving it as it is worked for me and making changes to this file resulted in error. This took me a while to find it by looking at other Github repos. Without any changes AppDeletegate.m file looks as follows and it works without any change.
Flutter App Before writing any code it is important to add firebase library to pubspec.yml file in flutter. For me it worked if I used the version mentioned in the screenshot
Last step is to write code to access data from Firebase using StreamBuilder. StreamBuilder is a Widget that converts a stream of user defined objects to widgets. This takes two arguments
- A stream
- A builder, that can convert the elements of the stream to widgets
As you can see in the following code, Scaffold contains StreamBuilder which listens to the stream and it acts as the element in charge of translating any changes in stream to view by updating value of Text as it changes. In short StreamBuilder is widget that builds itself based on the latest snapshot of interaction with a Stream.
The best part of using Firebase is that as soon as data is changed it reflects in app which is amazing. Imagine having thousands of users using your app on Android, iOS and Web, as soon as data is changed in Firebase the change is reflected on all these clients. This is so incredible that you forget the issues you face while making it work.
Credits:
While completing above I found following resources helpful:
- ‘Learning Google Firebase for Flutter’ by Chiu-Ki Chan on Linkedin Learning
- This Article by Ümit Duran https://medium.com/@durannumit/my-flutter-adventure-flutter-on-fire-93f7e676ff83
- Using StreamBuilder in Flutter by Manzurur Rahman Khan https://medium.com/@sidky/using-streambuilder-in-flutter-dcc2d89c2eae
