Flutter web + Firebase functions

5 min readOct 15, 2020

To complete the whole setups, we need to discuss the following.
Please feel free to skip if you already know a certain part.

Firebase project setup
Firebase setup in a flutter project
Firebase functions basics
How to use firebase functions in flutter web

No time to waste. Let’s get straight into it.

Firebase project setup

First, we need to install firebase cli tool.
If you need to install this, please refer to this link.
Once you’ve installed, make sure to log in using the terminal as well.

firebase login

Now, we’ll make a firebase project.
We could do it in the terminal but I personally prefer doing it on the web. (Easier)
Let’s go to the firebase console and create a project.

I just briefly named it as FlutterStudyWeb.
It’s not a complicated step so just set everything to the default and complete the creation process.

Now we’ll create an empty project folder using the terminal.

mkdir <YOUR_PROJECT_NAME>

Then, in the project folder, initiate a firebase project.

firebase init

Obviously, we’ll select Functions then select the existing project we’ve just created. Then firebase function is now set.

Firebase setup in a flutter project

We’ll create a flutter project first. In this tutorial, we’ll focus on the web version of flutter. However, the mobile version works really similar to the web version. For flutter installation and web setups, please refer to this link.

Let’s make a flutter project.

flutter create <YOUR_PROJECT_NAME>

Once it’s done, there’s a folder called web. We need to change index.html in the web folder. Let’s take a look at the <body> and change as the following,

STEP 1 installs Firebase SDKs. You may have to find the latest versions from this link here.

STEP 2 requires the Firebase config. Where do we find the config values? Let’s go back to the firebase console we’ve created. Then go to Project Settings -> General and see the bottom of the page.

Let’s hit </> logo to register your application.
Once you are done, you may check the config values under the firebase SDK snippet.

Firebase SDK snippet shows the config values

Let’s copy and paste all values from the snippet into index.html.

Now, we need to install a few packages. This might confuse you because there is a number of different packages you might think are suitable.
Some of them support the web version and some others don’t.
We’ll only have 3 packages:

When the installation is done, all setups are done!

Firebase functions basics

Basically, there are 2 ways to call functions from the firebase, onCall, and onRequest. onCall requires Firebase Cloud Functions SDK and onRequest is just like any other REST APIs.

Then what are the pros and cons of each method?

Pros for onCall:

Free from complicated settings like Authentication. (Because of the config in index.html)
Automatic serialization/deserialization when making a request.
Secured and safe (Other apps can’t use the function without the config)
Free from different request methods like GET, POST, and DELETE.

Cons for onCall:

Requires it’s own package.
In order to use the request in other apps, setup is relatively complicated. (It requires the firebase config. If the other app is already using a different firebase project? It’s getting more complicated.)

Pros for onRequest:

If no specific setup is done, it’s free to use for all applications. (Like a public API)
A ton of reference existing because it’s node.js.

Cons for onRequest:

It requires extra work and knowledge to have proper security and other setups.
Need to care about CRUD. (Create, Read, Update, Delete)
Need to care about body serialization/deserialization.

Now let’s test the functions in the flutter web project.
Let’s create basic firebase functions first.

We’ve created two functions, testOnRequestand testOnCall. In testInRequest, we’ll be testing GET and POST methods as well.
Once it’s ready, deploy the functions.

firebase deploy — only functions

To check whether the deployment was successful or not, we can go to the firebase console and check the functions page.

Firebase functions are deployed successfully

Now it’s time to makes some requests in the flutter project.

How to use firebase functions in flutter web

Let’s create basic request functions in the flutter web project.

Everything is straight forward. Let’s just run this.

onCall function seems to be working fine. However onRequest GET request is causing an error XMLHttpRequest. What’s wrong? It’s just a CORS error. As mentioned, we need to set our own setups for onRequest. Let’s go back to the firebase functions and fix the issue.

As we see, just handled CORS in theonRequest function.
Make sure to deploy and test again. It’s working fine now.

GET request is fixed after CORS is handled

Now, let’s also check if a POST request works as well.

final res = await http.post("https://us-central1-flutterstudyweb.cloudfunctions.net/testOnRequest",
body: jsonEncode({
  'message': 'hello there',
  'num1': 3,
  'num2': 4,
}));

It works fine as well.

Conclusion

onCall and onRequest both have clear pros and cons. Depending on your project, you may have to implement only one or both methods.

hoonblizz/Flutter_Study_Web

A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…

github.com