Introduction to mobile development with Flutter and Firebase

Flutter Logo

What is Flutter?

Flutter is a framework for making cross-platform mobile apps and websites.

TLDR:

This workshop will cover everything you know about how to make a simple Flutter app and connect it to the internet. This workshop will not have a solid final product, it will be a series of exercises showing how to connect a Flutter app to a server.

Covering:

• Flutter installation
• Creating a Flutter app
• Creating a Firebase project
• Connecting Flutter with Firebase

Flutter installation

To install Flutter go to flutter.dev/docs/get-started/install and follow their instructions

Windows Users:

To run Flutter you also need Android Studio and a real Android device or an emulator

MacOS Users:

To run on an Android device you also need Android Studio and a connected Android device or an emulator

To run on an iOS device you also need XCode and a connected iOS device or an iOS Simulator

MAC USER WARNING: If you want to use Flutter in the future you have to add Flutter to your path

Confirm installation:

In the command line or terminal run the command “flutter doctor”

You should get a response like :

Creating a Flutter App

1. Create a folder
2. Navigate to your folder in terminal
3. Run the command

flutter create myapp

You should get a response ending with:

Response from flutter create my app

To start your app:

1. Open a simulator
2. run the commands

flutter start

Your app should look like:

What is Firebase?

Firebase Intro Video

According to Google,

Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app.

Simply put, Firebase makes adding a server to your app really easy

Creating a Firebase project

1. Go to console.firebase.google.com
2. Click Create a project
3. After you finish creating a project it takes around 45 seconds for your project to be ready

Once it is created and you click continue you should see this:

Firebase Console

Creating a database

1. Click the Develop button on the upper right
2. Click the Database button below it
3. On the database page click Create database
4. Choose Start in test mode
5. Click the Next button
6. Choose a location: When choosing a location I recommended that you choose the one closest to you for the fastest speeds
7. Click Done

Creating your database usually takes about a minute, when its done loading you should see this:

Database

Connecting Flutter to Firebase

iOS

1. Go to your Project Overview
2. Click the iOS button
3. Give your project a bundle id, default for this project is com.example.myapp
4. Click Register app
5. Download GoogleService-Info.plist
6. Open XCode
7. In XCode open your project through its Runner.xcworkspace. This file can be found within your project’s ios directory
8. Drag your GoogleService-Info.plist into your Runner directory
9. In your projects directory in terminal run the command

cd ios && pod install && cd ..

Video demo

Now you are done with XCode

9. Skip steps 3 & 4

10. Open your apps folder in your IDE

App Folder

Android

1. Go to your Project Overview
2. Click the Android button
3. Give your project a bundle id, default for this project is com.example.myapp
4. Click Register app
5. Download google-services.json
6. Follow step 3 in Firebase
7. Add the following line to your projects app-module/build.gradle dependencies section

implementation “com.google.firebase:firebase-firestore:21.4.2”

Both

Open the pubspec.yaml file

12. Add the cloud_firestore dependency to the dependencies section.

My pubspec.yaml dependencies now look like:

13. If your Flutter app is running close it by typing “q” in your terminal window, before re-running

14. Once your app is running, wait for Firebase to verify your installation. This can take a few minutes

Shows finished Firebase connection

Using Flutter and Firebase together

Connecting to server

Querying data

Firebase side — Backend

Create data

1. Go to the database page
2. Click Start collection
3. Create document

My example data is a series of pets in a collection called “pets” with a document called “juno”

Example doc

Flutter side — Client

Start by importing Firestore into your main.dart file

When getting data we need to create an instance of Firestore, we can do this with

Firestore.instance

We can get the document we just created by using

However this returns a Future

A Future is used to represent a potential value, or error, that will be available at some time in the future. Receivers of a Future can register callbacks that handle the value or error once it is available. — Dart docs

A Future is data we don’t have yet, like a network request, or a photo that is processing.

To get data from a future, we create a futureBuilder

This code shows how to get a single document

This code works by passing that future into a futureBuilder and building our response below, when the snapshot(network)’s response isn’t done coming back we show a loading indicator, if it has an error, we return text saying that we have an error, and when it works we return text with our data.

When I replace the body of my Scaffold with this I get:

Querying a collection

If we got to get more than one document, or certain documents, the code gets more complex. We have to use a different future

Firestore.instance.collection(“pets”).getDocuments()

That code will get all documents in the collection, but sometimes you don’t want all of them. If you want to add a parameter your query you can use this

This code will only get pets(documents )with an age greater than 4

This works great for small databases, but when my database gets to 10000 pets it starts to get really slow. To speed this up, you can limit the amount of documents you will send.

This code will always send the documents in alphabetical order, but if you want to order the pets by age you can use

These can all be used together, however for it to work properly you need to start by filtering using where, then ordering using orderBy, and then limiting using limit.

This code shows how to get a list of 200 pets(documents), ordered by age, that are older than 4 from the pets collection.

Screenshot of working futureBuilder

Please note that Juno is not showing up, as Juno’s age is less than 4

Sending data

We also send data using a Firestore instance

The simplest way to do this is with

This code adds a document with a random id to the pets collection, with an age of 6, breed of “pug”, and birthday of right now.

But this won’t happen on its own, it has to happen within a function that is triggered by an event. An easy way to do this is with a button.

Flutter has 4 main types of buttons, flat buttons, raised buttons, outline buttons, and floating action buttons.

Button code snippets

For the next step you can use whichever you prefer, I will be using a raised button.

Set the body of your Scaffold to your button

For a button to work in flutter, it needs a child, and something to do when it is pressed. These can be set like this:

To add to firestore when the button is clicked, add the add to Firestore line from above into the function.

Naming a document combines the structures of querying a single document, and adding an unnamed document.

In Review

• When connecting a Firebase database to Flutter remember to add the SDKs and the Google Services document, and remember to create the database
• Calling Firebase works with futures which can be dealt with by using a futureBuilder
• Sending data to Firebase happens within a function, which can be triggered by a button press

Next Steps

• Research Flutter widgets with Widget of the Week
• For advanced futures research async functions
• For more in Cloud Firestore look at configuring security rules
• For more with Firebase I recommend checking out their login/authorization platform