Google Flutter with AWS Lambda to build a serverless mobile app for movie listings
Develop a mobile app with Google’s open-source UI framework
Google recently announced the beta release of Flutter at Mobile World Congress 2018. Flutter is new open-source mobile UI framework that’s used to build native apps for both iOS and Android.
Flutter uses Dart to write applications, so the syntax should look very familiar if you already know Java, JavaScript, C#, or Swift. The code is compiled using the standard Android and iOS toolchains for the specific mobile platform — hence, much better performance and startup times.
Flutter has a lot of benefits for developers:
- The project is open-source
- Hot reloads for quicker development cycle
- Native ARM code runtime
- Rich widget set & growing community of plugins backed by Google
- Excellent editor integration with Android Studio & Visual Studio Code
- Single codebase for iOS and Android with full native performance that does not use JavaScript as a bridge or WebViews
- Reusable components similar to React Native
- Dart feels like Java — making it easy for many developers to jump in
- The toolkit use Widgets, so everything should seem very familiar for anyone coming from a web development background
- This might end the Java holy wars between Google vs Oracle
Creating a application using Flutter was a great opportunity to get my hands dirty and evolve the Serverless Golang API demonstrated in my previous post — “Serverless Golang API with AWS Lambda”.
The movie website uses an AWS Lambda function written in Go — the latest language for serverless applications. The site retrieves and displays the latest movie releases in your browser.
Now let’s create a mobile version of our movie site using Flutter!
Building a serverless mobile app using Flutter
The Flutter application will call the API Gateway, and then invoke an AWS Lambda function. The function will use the TMDB API to retrieve a list of movies airing this week in theaters — all in real-time. The application will consume the JSON response and then display results in a ListView.
Note: All code can be found in my GitHub repository.
To get started, follow the previous tutorial on how to create a Serverless API.
- Once it’s deployed, copy the
API Gateway Invoke URL
to the clipboard. - Next, download the Flutter SDK by cloning the following GitHub repository:
git clone -b beta https://github.com/flutter/flutter.git
- Make sure to add
flutter/bin
folder to yourPATH
environment variable. - Next, install the missing dependencies and SDK files:
flutter doctor
- Start Android Studio and install the Flutter plugin from File>Settings>Plugins
- Now it’s time to create a new Flutter project using Android Studio.
- Since Flutter also comes with a CLI, you can also create a new project with the following command:
flutter create PROJECT_NAME
.
- Android Studio will generate the files for a basic Flutter sample app.
- We will be doing our work in the
lib/main.dart
file:
- Now you can start the app — the following screen should appear:
- Next, create a simple POJO class named
Movie
using the following set of attributes and getters:
- Now create a widget named
TopMovies
. - That step will create its state called
TopMoviesState
. - The state class will maintain the list of movies.
- Next, add the stateful
TopMovies
widget to main.dart:
- Now it’s time to add the
TopMoviesState
class. - Most of the app’s logic will resides in this class.
- Let’s initialize
our _movies
variable with a list of movies by invoking API Gateway. We will iterate through the JSON response, and add the movies using the_addMovie
function:
- The
_addMovie()
function will simply add the movie passed as an argument to list of_movies
:
- Now we’ll need to display movies in a scrolling
ListView
. Flutter comes with a suit of powerful basic widgets to make this easy. - In the code below, I used the
Text
,Row
, andImage
widgets. - The
Padding
andAlign
components properly display a movie item.
- Finally, update the build method for
MyApp
to call theTopMovies
widget:
- Restart the app —a list of current movies should appear!
And the Oscar goes to …
Congratulations! We’ve successfully created a serverless application in just 143 lines of code — and it works like a charm on both Android and iOS.
Flutter is still in the early stages — so of course it has some drawbacks:
- Steep learning curve compared to React Native which uses JavaScript
- Dart is unpopular compared to Kotlin or Java
- Does not support 32-bit iOS devices
- Due to autogenerated code, the build artifact is huge. The APK for Android is almost 25 Mb — while I built the same app in Java for 3 Mb.
For an alpha open-source project, it look very stable and well designed. I can’t wait to see what you can build with Flutter! Drop your comments, feedback, or suggestions below — or connect with me directly on Twitter @mlabouardy.