My first Flutter project as an long time Angular developer

I am a full stack software engineer with 10 years of experience with .Net (Core) and Angular (I have started with AngularJS).

We, at Novaloop needed an MVP (or rather a working prototype) and we decided to implement it in Flutter. We chose Flutter mainly because we wanted to be quick and we wanted the MVP to potentially run on all different platforms.

The search for a new community

As a long time user of the .Net Framework and Angular, I am very familiar with influential people in the community that create good content. This is definitely not the case for Flutter.

Twitter Community

Hint: The Flutter community handles use the blue heart emoji extensively ;)

No particular order:

Learning Resources

State Management

https://docs.flutter.dev/development/data-and-backend/state-mgmt/options

Periodically, Mike Rydstrom (https://twitter.com/RydMik) publishes an overview of the State Management Solutions with the most LIKEs. https://twitter.com/RydMike/status/1528827017172504579

This is the hottest topic in the community. Hardly anyone doesn't have an opinion on it. As far as I understand, there is no official recommendation from Google. There is a discussion about whether there was once an official endorsement for Flutter BLoC. At IO '18, it seems that the BLoC architecture was presented and the package was then developed according to this architecture design. At the moment there seems to be a big momentum for Provider and for the next generation of it: Riverpod. These are maintained by Remi Rousselet (https://twitter.com/remi_rousselet). Soon there will be a new major release (2.0) of Riverpod and there seems to be a lot of changes and simplifications in the next months, see also the talk of Remi at the Flutter Vikings conference https://youtu.be/C2Zp731g8Es?t=12762 The courses of Andrea Bizzotto are great when it comes to Riverpod and a possible architecture. Andrea proposes an architecture of her own and calls it Riverpod Architecture https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/

To get a feel for both architectures, we developed our project with both state management solutions. To be fair, the first version was implemented with Riverpod and the second version with BLoC, so we had already learned a lot during the implementation of the second version. I know NgRx very well from Angular and therefore felt very quickly at home with the BLoC pattern. We also want to store a part of the state in local memory and reload it on restart. We have implemented this with Riverpod itself in the BLoC package there is already a solution hydrated_bloc. Also the possibility of global observers has helped us a lot in the development and has helped a bit over the lack of Redux tools (in the browser).

GetX

This seems to be the red rag in the community. In the world of Harry Potter, it would be compared to Voldemort. In the popularity rankings it is high up, if not on the first place when it comes to state management and dependency injection. But as far as I understand it is considered by the community as its own framework and not as an extension for Flutter. It uses completely different approaches and thus hides much of the Flutter DNA.

Dependency Injection

As a .NET and Angular developer, I am very familiar with Dependency Injection and use it extensively. So I was rather surprised that there is no solution in the framework directly here either. Again, there are many options and packages. Some even do without Dependency Injection and use singletons or instantiate classes directly. But new is glue and it makes it difficult to write tests.

Riverpod already brings a lot with Provider. For the rest and for BLoC we relied on get_it from Thomas Burkhart (https://twitter.com/ThomasBurkhartB).

Configuration

Again, I'm used to the framework already bringing solutions and making it easy for a developer to ship different environments. Again, to my knowledge, there is no official solution. Andrea has again published a good article with a suggestion: https://codewithandrea.com/articles/flutter-api-keys-dart-define-env-files/

FLutter on the Web

What finally moved us to work with Flutter was the possibility to publish for the web as well. Unfortunately, the implementation is quite "unconventional". Unlike Angular or React, Flutter does not produce HTML and CSS, but uses the canvas. There are two different rendering options with their advantages and disadvantages.

Some background articles on this:

• https://docs.flutter.dev/development/platform-integration/web/renderers
• https://wilsonwilson.dev/articles/flutter-web-renderers
• https://medium.com/flutter/hummingbird-building-flutter-for-the-web-e687c2a023a8
• https://medium.com/flutter/flutter-web-support-updates-8b14bfe6a908
• https://medium.com/@GSYTech/how-to-optimize-flutter-web-and-how-flutter-web-work-in-html-renderer-b399ffd66718

Testing

This is what I missed the most from Angular. I am a big one of integration testing in the frontend. For this I prefer to use Cypress. Cypress is unfortunately not usable with Flutter, resp. only via detours and by far not as comfortable as Angular.
With the integration_test package similar results can be achieved and hot reload seems to be possible. Unfortunately I failed there. For the current project we have also set the BLoC package and for a certain part of the state we need the hydrated_bloc package. Unfortunately at the moment it seems that no integration tests can be realized: https://github.com/flutter/flutter/issues/96939

Conclusion

The next comments are strictly my personal opinion and refer only to the web version and not to the mobile development part of Flutter.

I love Flutter's declarative widget system. The speed at which prototypes and executable MVPs can be developed, for all platforms, is impressive.

I would not, as of today, implement a complex and long-lived web application with Flutter. For an executable prototype or a small MVP to test the market, Flutter is great.