Flutter Navigation: flutter_modular or stacked?

The current way of Flutter Widgets Explorer using switch statement to construct the main listing screen and navigation no longer sustainable as I foreseen the number of showcases will be double or triple in the coming months.

Hence, I decided to look into new solution. First, I come across an article shared about Flutter Navigation 2.0. In my opinion, it is too complex, we need better abstraction to make it usable to developers. I search again and finally nailed down to two alternatives: flutter_modular and stacked.

Let's look at simple code metrics (line of codes) for both packages:

It is obvious that flutter_modular is the winner here. It has less boilerplate code and code generation is not required. For stacked, it still has more line of codes compared to flutter_modular after excluding the generated app.router.dart and app.locator.dart. Also, flutter_modular using Navigation 2.0 and stacked still using Navigation 1.0 if I'm not wrong (Correct me if I'm wrong).

Lastly, there's one pending issue for Flutter Widgets Explorer to adopt flutter_modular as it's navigation library, the default back button is missing, I opened an issue that still pending for response at the time of writing.

If you interested to dig into the code, feel free to look into the github repo for flutter_modular and stacked implementation.

Happy coding! :)

Deploy Serverless Machine Learning Models to AWS Lambda

I just completed the Udemy course with the same title of the blog post.

The course cover three machine learning examples using different library:

1. scikit-learn: Using regression model from scikit-learn trained on California housing dataset for house price prediction.
2. spacy: Using a small English model from spaCy NLP framework for named entity recognition.
3. keras: Using ResNet50 computer vision deep learning model from Keras framework to create for image recognition.

Let's me tell you the following value-added changes of my code from the original source code from the course:

• The examples are using Python 3.8 instead of Python 3.6 in the course and latest version of libraries except the scikit-learn example using earlier version of scikit-learn to align with m2cgen which has the possibility to convert scikit-learn model to native code and C code running in the microcontroller with emlearn.
• To deploy all examples. you only need git, no other installations are required. All examples are setup with continuous deployment pipeline using Github Actions. The following diagram shows how it works from the high-level:

1. Developer update changes to repository by sending a git push command. 
2. The git push command will trigger the Github Actions workflow which run the serverless deploy command based on configurations in serverless.yml file. 
3. The CloudFormation stack consists of API Gateway, AWS Lambda, S3, ECR, etc. will be created on AWS.

After you forked my repository, you just need to add AWS_KEY and AWS_SECRET to Repository secrets of Settings/Secrets of your github repo like the following image:

Then, you can deploy all examples to AWS lambda with a git push command.

• All examples are setup with "warm start" and request throttling limit to 1 to protect your account and your wallet (You don't want to have surprises in your monthly credit card bill for demo projects, right?)
• All examples have a last step "Test Lambda functions" to verify the public API is working post-deployment.
• Spacy and keras example are deploy using Docker container image to AWS Lambda. Thanks to Jan Bauer published the blog post Using container images to run TensorFlow models in AWS Lambda, timing is just right on helping me to get the keras example working.
• For keras example, image uploaded directly to Lambda endpoint and store as temp file instead of upload to S3 bucket.
• Code of each example is located in its own branch.

Please take note of the storage cost of S3 and Elastic Container Registry (ECR), make sure you clean up unnecessary files and Docker image files there.

Lastly, if you look for someone on deploying your machine learning model to AWS lambda, I think I can help here. :)

Oh yeah, here is the github repo URL https://github.com/limcheekin/serverless-ml if you missed it.

I think the scope is broad enough for now, let's go deep.

Stay tuned to the next!

Flutter Multi-modules Support

I wrote this article to inform Flutter developers for a lesser known feature of Flutter: Multi-modules support in a Flutter project. Thanks for inspiration from an article A Flutter BLoC + Clean Architecture journey to release the #1st Idean Flutter app published on Medium.com. It mentioned about “Dart modules”, I not sure whether we are referring to the same thing here.

After gone through the article above, I perform a google search for Flutter module and I found many articles and videos on how to create modular Flutter project, or how to structure Flutter code in modular way, and a library known as flutter_modular. But I’m looking for “real” modules that supported by Flutter and IDEs to define a physical boundary among modules, not a logical one defined by developers. It is an “aha!” moment, out of no way I am thinking of typing flutter create –help command in my terminal window. From the list of options, I found the following option like what I am looking for.

Then, I proceed to flutter.dev website to find out more information about the -t option, not much information found besides a description similar to the above. Hence, I decided to create a Flutter project to test it out. In the flutter project directory, I’m creating two modules such as nested_list and tab_buttons using the following command:

flutter create -t module <module_name>

The following is directory structure of the Flutter project, you can see that the nested_list and tab_buttons module is outside the lib directory (All Flutter code need to be located in the lib directory normally).

The following is the advantages of the “real” Flutter module besides modular structure:

• It has it’s own pubspec.yaml file, you can manage assets, dependencies and other stuff on module-basis.
• It can have it main.dart, you can run the code of a module independent from project and other modules.
• It can have it own test directory, you can write tests to test code of the module.
• A Flutter project can have mix of non-null safety and null safety packages which segregated by modules.
• You can start null safety migration module by module without blocking the release cycle. Flutter Widgets Explorer will adopt this approach.

Once the module is ready, you can link the module to the project by specify the following dependencies  configuration in the pubspec.yaml file:

The Flutter project is working in my mobile phone and Google Chrome with the following command:

flutter run -d chrome

Please check out the following github repo and test it out yourself:

https://github.com/limcheekin/flutter-modules

Thanks for reading, I hope the write ups is helpful to you, hear from you soon! :)

Flutter Widgets Explorer: The Source Code View

The Source Code View is a reusable widget to share code from your public Github repository. It created based on knowledge gained from previous showcases such as Syntax View, Animate Icons, URL Launcher, Markdown View, and Shimmer Effect. 

The Source Code View widget will be integrated into Flutter Widgets Explorer to share the code of showcases, so that you can copy and paste the code with a click of button, sound great? :) 

I created a MultipleRequestsHttpClient class to reuse the HTTP client in multiple widgets as Future.wait doesn't cut it. Please let's me know if you think there's better way to do the same thing.

Thanks to the pubspec_parse package allowed the PubspecDependenciesView widget to retrieve dependencies data of the pubspec.yaml file.

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the source_code_view branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The About Dialog

The about dialog described what the application did and its licensing information. It is integrated into Flutter Widgets Explorer.

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the about_dialog branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The Shimmer Effect

The Shimmer Effect is a special effect to indicate loading status. It is an alternative to progress bar to show loading progress.

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the shimmer_effect branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The Markdown View

The Markdown View will showcase display of markdown file retrieved from Github repository as rich text format. Thanks to Flutter Markdown package did the heavy duty, it makes the work a lot easier than I thought.

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the markdown_view branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you. :)

Flutter Widgets Explorer: The URL Launcher

 The URL Launcher can launch a URL to browse website, make a phone call, send Email or SMS. 

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the url_launcher_showcase branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request. 

I'd love to hear from you. :)

Flutter Widgets Explorer Go Live!

I would like to announce that the Flutter Widgets Explorer app just released to Google Play!

It is important milestone to me as it is the first mobile application I published to the Google Play Store.

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

Thank you for your support. :)

Oh yeah, I almost forgot to mention that the changes made for publishing to android is in publish_android branch of the https://github.com/limcheekin/fluwix. Many thanks to the creator of flutter_launcher_icons and flutter_native_splash package, it greatly simplified the process of getting my app ready to publish.