The Beta release of Flutter from Google has caught the attention of several developers and that includes me. I am always interested in trying out developer tools and understanding how companies are pushing the envelope in terms of productivity.

This blog post is by no means a detailed tutorial on Flutter and for that matter Google Cloud Functions, but aims to demonstrate how straightforward it was for me to put together the two.

What we shall build? A Famous Quotes Application.

We all love inspirational quotes .. don’t we? This is a simple “Famous Quotes” app that has just single screen and shows a random famous quote. We shall use Flutter to create our mobile application and we will deliver a random quote to the Flutter mobile application via Google Cloud Functions, which is the Serverless FaaS (Functions as a Service) available on GCP (Google Cloud Platform).

Here is a screenshot of the Famous Quotes application in action:

The Quotes are completely managed by a Google Cloud Function that we shall deploy. For the sake of keeping things simple, we will simply have about 3–4 quotes available as sample data in the function itself and it will return us a random quote.

So, when we click the Get a Random Quote button that you see in the screen, it will directly invoke the Google Cloud Function that we have deployed and then render the data.

Sounds good? Let’s get going.

Prerequisites to building the Famous Quotes App

Here are the prerequisites before you get going with the rest of the tutorial:

• You should have a Google Cloud Platform account with billing enabled. Google Cloud Platform comes with a generous Always Free tier, which you can use for this tutorial.
• Create a new Project via the Google Cloud Platform console.
• Enable Google Cloud Functions API : From the console hamburger menu, go to APIs and Services → Library. Enter Cloud Functions in the Search bar and you should see the following screen:

Click on that and then Enable the API.

• Setup Flutter Development Environment on your machine. The Flutter Documentation is one of the best that I have seen and the Getting Started section is comprehensive in getting your environment setup on a platform of your choice. I am using a Mac and Android Studio. Please be patient while setting up the environment, especially if you do not have Android Studio installed on your machine.
• I used an Android Virtual Device (AVD) to test out the application and you could use that or probably an actual device. I leave that to you.

Now, that we have the prerequisites in place, let us do this in 2 steps:

• Develop our Google Cloud Function that serves the random quote
• Develop our Flutter App that will make use of the Google Cloud Function

Google Cloud Function : getrandomquote-function

I am going to demonstrate developing our function completely in the cloud via the Google Cloud console. The only reason I am doing this is to keep things simple and our function is very compact and there is nothing much to it.

In a real world scenario, I expect that you do your development locally and either deploy it from a repository or from your local machine via the gCloud SDK.

Assuming that you are logged into to Google Cloud Console and selected your specific Google Cloud Platform project, navigate to Cloud Functions.

Click on CREATE FUNCTION as shown below:

This will bring up a form where you can provide the details for your function as follows:

1. Name : Please provide a name for your function. For e.g. getrandomquote-function
2. Memory Allocated : We can go with the least amount of memory since our function is not doing too much. Go with 128 MB.
3. Trigger: Cloud Functions are executed in response to a trigger. GCF supports multiple triggers like HTTP Trigger (direct invocation), subscribing to a Pub/Sub message, Google Cloud Storage (GCS) events, etc. For our scenario, we will have the Flutter App directly making a HTTP call to our function, so we will go with HTTP Trigger in this case.
4. Notice that it creates a unique URL for your function. Please note this down. We will refer to this URL as FUNCTION_URL for the rest of this article.
5. Source Code : We will provide the source code in the inline editor itself. So go with Inline Editor.
6. In the index.js tab, which is where you will write your function, use the following snippet of code:

7. Function to execute : In this field, the value will be getRandomQuote as you can see from the exports field in the above code.

8. Go ahead and click on the Create function. This will create the GCF function and you should see it deployed and ready in the list as shown below:

9. Let us test out our function by clicking on the function above. It will lead you to a details page for the function, where you can not just track the metrics, source code but also test out your function. You should see a screen similar to the one shown below:

Simply click on the Test the function button and you should get the output.

Please make a note of the FUNCTION_URL as mentioned earlier. You will need this in your Flutter App. You can also test out the FUNCTION_URL directly in your browser and you should get a similar JSON output for a particular quote.

Great! Now that we are done with developing our GCF, it is time to take a look at the Flutter App.

Flutter App: Famous Quotes

Since I have just started with Flutter, I heavily relied on the documentation to help me get started. Here are a couple of specific links that helped me understand the basics of a simple Flutter App.

I strongly recommend that you go through the above documentation links. They are worth your time to understand what is going on.

Assuming that you have setup the Flutter plugin in Android Studio, you can create a new Flutter project. You will see some sample code present in the lib/main.dart file. Simply replace it with the source code given below:

Famous Quotes Flutter App source code:

Here are some key points from the above source code:

1. The source code is pretty standard for building out a single screen app in Flutter. We begin with MyApp but notice that our home attribute is a Stateful Widget RandomQuotes.
2. We are maintaining a variable named _randomQuote in our state. Initially it is set to “-”.
3. Our scaffolding for the widget includes a Text field that will contain the value of the random quote and a button, which will invoke the _getRandomQuote() function on clicking it.
4. The _getRandomQuote() function makes a call to the FUNCTION_URL (be sure to replace it with your function url), parses out the JSON and then sets the value in the _randomQuote variable.

If you have followed the previous 2 links that I provided to the documentation, this code is heavily borrowed from there, so I suggest that you study that.

Running the App

You could run the application directly from Android Studio or from the Terminal, go to the root folder of the application and give flutter run command.

If all goes well, you will see the Famous Quotes App working for you, all powered by Flutter and Google Cloud Functions.

Hope you enjoyed the tutorial.