Flutter App Architecture: flutter_bloc or flutter_clean_architecture?

The title of the blog post suppose to be "Flutter App Architecture: flutter_bloc or flutter_clean_architecture or stacked?" as I planned to look into comparison of Flutter App Architecture for flutter_bloc, flutter_clean_architecture and stacked package using the Number Trivia app. Unluckily I bumped into Blockchain Technology recently which need my 100% focus, hence I don't have time for the stacked package. (If you're stacked supporter, it will be great if you can showcase stacked architecture using the same Number Trivia app). The good thing is the lengthy post become less lengthy.

You can see the Number Trivia showcase live powered by Fluwix.com:-

Ala! Too bad the Number Trivia showcase only work in mobile apps and web host other than HTTPS such as localhost. As Fluwix.com is hosted in secured site, it is facing the following error when send a get request to the numbersapi.com which is insecured:

Kindly let's me know if you found a solution for the error above.

You can find out details of the Number Trivia app and Clean Architecture from the excellent Flutter TDD Clean Architecture Course, I will not repeat here. Let's look into the architecture and some code metrics without further ado.

flutter_bloc

Github repo: https://github.com/limcheekin/fluwix/tree/number_trivia_flutter_bloc/number_trivia

Total LOC for functional codes is 617 and test codes is 603. You can find out details of code metrics from the README of the link above. 

Enhancements made from the original codes:

• Dependencies updated to the latest version and null safety support.
• Replaced data_connection_checker package to connectivity_plus as it doesn't support null safety.
• Added freezed package to generate toString/toJson/fromJson, hence model class is not needed.

flutter_clean_architecture

Github repo: https://github.com/limcheekin/fluwix/tree/number_trivia_flutter_clean_architecture/number_trivia

Total LOC for functional codes is 641 and test codes is 444. You can find out details of code metrics from the README of the link above. The test codes of flutter_clean_architecture has lesser LOC is due to there's no test cases for controller or presenter class where flutter_bloc has bloc tests. I raised a question How do I write test for the controller or presenter class? to the official github repo. In my opinion, we still can write Widget tests to cover the testing of this functionality.

The flutter_clean_architecture package using view, controller and presenter classes compare to flutter_bloc package using event, bloc and state classes.

Conclusion

So, which one is good for your team? Some developers will say "Learn X, and forget the rest." I tend to disagreed as every team's experience, expertise and background is different, I think it is better for your team to look into options available and pick the one that fit well with your team. Lastly, I will go for flutter_clean_architecture package as it's codes look more natural to me. By the way, you can further enhance the codes by using injectable package if you don't want to write the code in dependencies.dart file manually.

Hope this help and I'd love to hear from you! :)

Free Code Audit For Flutter Project

When you see the title you must think that this is a click bait, otherwise it is too good to be true, right? Is there any catch? It is Better Code Initiative run by me to raise the awareness on code quality matters among stakeholders of computerized systems/apps and IT projects, not just developers. 

It is inspired by a conversation between a Flutter developer and I on the subject of code quality as in my opinion "Most businesses don't care about code quality until their application or system crashed in the production environment". I hope you prove me wrong if you are a business stakeholder who is reading the article. By the way, if you care about code quality, your engineering team members will put priority on the quality of codes they wrote, which in turn will improve the overall health and robustness of your application or system.

You can adopt the best practices of writing code used internally at Google for free with 3 steps:

1. Add the pedantic package to the dev_dependencies of the pubspec.yaml file of your Flutter project before you write the first line of code, for example pedantic: ^1.11.0 at the time of writing.
2.  Add a analysis_options.yaml file to the root directory of your Flutter project with the following line: include: package:pedantic/analysis_options.yaml
3. Your IDE such as Visual Studio Code will report the code issues automatically or you can see the list of code issues by execute the flutter analyze in the command line.

If you still not sure how to do it, you can check out the offer I will audit the code quality of your flutter projects for free at Fiverr. I will generate a report for your Flutter project including: 

• Summary of number of code analysis/linting issues and null safety issues
• List of code analysis/linting issues and null safety issues
• Cost of fixing the issues reported

You can see the sample report below:

If you need helping hands to fix the coding issues and improving the code quality of your Flutter project, please feel free to contact me.

Hear from you soon! :)