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 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
- 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!
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 URLto 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/binfolder to your
- Next, install the missing dependencies and SDK files:
- 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
- Now you can start the app — the following screen should appear:
- Next, create a simple POJO class named
Movieusing the following set of attributes and getters:
- Now create a widget named
- That step will create its state called
- The state class will maintain the list of movies.
- Next, add the stateful
TopMovieswidget to main.dart:
- Now it’s time to add the
- Most of the app’s logic will resides in this class.
- Let’s initialize our
_moviesvariable with a list of movies by invoking API Gateway. We will iterate through the JSON response, and add the movies using the
_addMovie()function will simply add the movie passed as an argument to list of
- 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
Aligncomponents properly display a movie item.
- Finally, update the build method for
MyAppto call the
- Restart the app —a list of current movies should appear!
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:
- Dart is unpopular compared to Kotlin or Java
- Does not support 32-bit iOS devices
- Due to autogenerated code, the build artifact is hug**e. The APK for
Android is almost 25 Mb — while I built the same app in Java for 3 Mb.
For an beta open-source project, it look very stable and well designed. I can’t wait to see what you can build with Flutter!