Flutter & AWS Lambda

I think it is time to create a blog post to capture my findings, thoughts (before it become unmanageable) and track the overall progress of my journey of learning and building a mobile and web application using Flutter as front-end and AWS Lambda, MySQL Database and Firebase as back-end. Let start with an architecture overview of the application. (By the way, if you're setting up your local environment for Flutter development, the Flutter Perfect SetUp article is a good reference.)

Architecture Overview

There are 6 components on the diagram above:

1. Flutter Mobile: an app that runs on both Android and iOS with the same Flutter code.
2. Flutter Web: HTML, CSS and JavaScript files that are generated from the same Flutter code and hosted statically in Netlify.
3. Netlify: It can be any web hosting provider. Netlify is chosen as it comes with CDN and custom domain name support for free tier plan.
4. Amazon Lambda: The backend GraphQL and Restful APIs which serve the Flutter applications and store and pull data from MySQL Database or perform authentication with Firebase.
5. MySQL Database: All application data should store in and retrieve from MySQL database.
6. Firebase: Mainly used for authentication of Google Account and Facebook Account, other features of Firebase would be incorporated as needed.

Currently, the focus of the application development is on Flutter Mobile - Android, Amazon Lambda and MySQL database.

Flutter Mobile

Android is chosen as first platform the application supported due to the following reasons:

1. There are more users using Android platform than iOS platform, one of the application requirements is reaching more users.
2. Android applications can be developed on Windows or Linux platform where iOS applications require MacOS.

Before I start to write the first line of the application code, I would like to have a code structure that is scalable enough to grow with the application features and technical changes without too much pain in the future. Thanks for Matt from Resocoder.com created the TDD Clean Architecture Course (https://resocoder.com/2019/08/27/flutter-tdd-clean-architecture-course-1-explanation-project-structure/). After I code along with the course (Github repo https://github.com/limcheekin/flutter-tdd-clean-architecture), I decided to create the app using the architecture shared by Matt.



Currently the code of the app is hosted in Github private repository and continuous build by CodeMagic (https://codemagic.io) which will notify the user on status of build via E-mail message. As the app is under active development, user will install the app to Android device from a link in E-mail message received. Once the app is ready for the first beta release, it would publish to Google Play Store.

The following features common to all modern mobile apps (I hope I will write a blog post for each and backed by a Github repository):

• AppBadger with background data fetching (Completed with improvement needed)
• Nested List (Horizontal ListView inside Vertical ListView)
• Loading progress with shimmer effect
• Theme Switching
• https://resocoder.com/2019/08/09/switch-themes-with-flutter-bloc-dynamic-theming-tutorial-dark-light-theme/
• https://www.filledstacks.com/post/multiple-themes-in-flutter-dark-and-light-theme-flutter-stacked/ 
• https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3
• https://youtu.be/MnTEHs-ZP0E
• https://youtu.be/XdUMp9k5JCI
• Responsive UI
• https://medium.com/flutter-community/flutter-responsive-ui-for-learning-platform-app-2df185f86e8e
• Localization & Internationalization
• https://youtu.be/Zw4KoorVxgg 
• https://youtu.be/lDfbbTvq4qM
• Offline-first Todo App
• https://github.com/limcheekin/TodoNotes
• https://flutterdata.dev/
• https://github.com/flutterdata/flutter_data_todos
• Testing
• *Testing Everything with Flutter - Miguel Beltran (Video, Slides, Code)
• Widget Testing For Dummies - Pooja Bhaumik (Video, Code)
• Flutter Testing For Beginners - The Ultimate Guide
• How to Unit Test in Flutter - Guide by FilledStack
• Architecture
• https://github.com/ThomasEcalle/app_starter
• https://pub.dev/packages/flutter_clean_architecture
• https://pub.dev/packages/flutter_modular
• https://pub.dev/packages/stacked
• https://blog.gskinner.com/archives/2020/09/flutter-state-management-with-mvcs.html#more-4984

Flutter Web

Nothing has been started for the Flutter Web, will look into it only when it reaches beta status. The diagram above is created based on basic understanding of Flutter Web.

HTML, CSS and JavaScript files will be generated from the same Flutter Mobile code base. The code generation process might be run locally and pushed to Github repository (The flow depicted by the diagram above) or built by Github Actions or CodeMagic automatically and deployed to Netlify. The fluwix.com is continuous deployed by GitHub Actions.

AWS Lambda

The back-end API is implemented using Micronaut Framework (Yes, I hear you, it is run on Java platform!) and deployed as AWS Lambda.



Currently the code of the application is hosted in Github private repository and continuous deploy by Github Actions. You might ask “Did you face the cold start issue which is common to Java-based AWS Lambda?”. Yes, even with the lightweight Micronaut Framework, the back-end API still hit the 30 seconds limit of the API Gateway.

The way out is to build the code to native app using GraalVM and run it as AWS Lambda custom runtime, please see the Deploy a Micronaut application as a GraalVM Native Image to AWS Lambda to find out more. 

Note on Dec 17: You can find out more from a GraphQL API implemented by me in the following blog post: 

http://limcheekin.blogspot.com/2020/12/implementing-graphql-api-with-micronaut.html

If you would like to see a dedicated blog post and public github repo for any topic above, kindly let's me know in the comments section below, I will try to make time for it.

I'd love to hear from you! :)