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.
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.
Here are the prerequisites before you get going with the rest of the tutorial:
Click on that and then Enable the API.
Now, that we have the prerequisites in place, let us do this in 2 steps:
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:
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.
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:
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.
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.