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! :)

Originally published at http://limcheekin.blogspot.com/2021/06/flutter-app-architecture-flutterbloc-or.html.