Serverless Application with Google Flutter and Lambda

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 SDKby cloning the following GitHub repository:git clone -b beta https://github.com/flutter/flutter.git
• Make sure to add flutter/bin folder to your PATH 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 Movieusing the following set of attributes and getters:

class Movie {
  String poster;
  String title;
  String overview;
  String releaseDate;

  Movie({this.poster, this.title, this.overview, this.releaseDate});

  getTitle(){
    return this.title;
  }

  getPoster(){
    return this.poster;
  }

  getOverview(){
    return this.overview;
  }

  getReleaseDate(){
    return this.releaseDate;
  }
}

• Now create a widget namedTopMovies.
• 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:

class TopMovies extends StatefulWidget {
  @override
  createState() => new TopMoviesState();
}

• Now it’s time to add the TopMoviesState class.
• Most of the app’s logic will resides in this class.

class TopMoviesState extends State<TopMovies> {
  List<Movie> _movies = new List();
  final _apiGatewayURL = "https://gfioehu47k.execute-api.us-west-1.amazonaws.com/staging/main";
}

• Let’s initialize our _movies variable with a list of movies by invoking API Gateway. We will iterate through the JSONresponse, and add the movies using the _addMovie function:

@override
  void initState() {
    super.initState();
    http.get(this._apiGatewayURL)
        .then((response) => response.body)
        .then(JSON.decode)
        .then((movies) {
          movies.forEach(_addMovie);
        });
}

• The _addMovie() function will simply add the movie passed as an argument to list of _movies:

void _addMovie(dynamic movie){
    this._movies.add(new Movie(
      title: movie["title"],
      overview: movie["overview"],
      poster: movie["poster_path"],
      releaseDate: movie["release_date"]
    ));
}

• Now we’ll need to display movies in a scrolling ListView. Fluttercomes with a suit of powerful basic widgets to make this easy.
• In the code below, I used the Text, Row, and Image widgets.
• The Padding and Align components properly display a movie item.

Widget _fetchMovies() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i){
          return new Card(
            child: new Container(
              height: 250.0,
              child: new Padding(
                padding: new EdgeInsets.all(2.0),
                child: new Row(
                    children: <Widget>[
                      new Align(
                        child: new Hero(
                            child: new Image.network("https://image.tmdb.org/t/p/w500"+this._movies[i].getPoster()),
                            tag: this._movies[i].getTitle()
                        ),
                        alignment: Alignment.center,
                      ),
                      new Expanded(
                        child: new Stack(
                          children: <Widget>[
                            new Align(
                              child: new Text(
                                this._movies[i].getTitle(),
                                  style: new TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                              ),
                              alignment: Alignment.topCenter,
                            ),
                            new Align(
                              child: new Padding(
                                  padding: new EdgeInsets.all(4.0),
                                  child: new Text(
                                      this._movies[i].getOverview(),
                                      maxLines: 8,
                                      overflow: TextOverflow.ellipsis,
                                      style: new TextStyle(fontSize: 12.0, fontStyle: FontStyle.italic)
                                  )
                              ),
                              alignment: Alignment.centerRight,
                            ),
                            new Align(
                              child: new Text(
                                this._movies[i].getReleaseDate(),
                                style: new TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                              ),
                              alignment: Alignment.bottomRight,
                            ),
                          ]
                        )
                      )
                    ]
                )
              )
            )
          );
      }
    );
  }

• Finally, update the build method for MyApp to call the TopMovies widget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'WatchNow',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('WatchNow'),
        ),
        body: new Center(
          child: new TopMovies(),
        ),
      ),
    );
  }
}

• 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, thebuild 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.