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.

It's not easy coming from the outside into a new community and catching up for several years.

There is a very active Discord channel (discord.com/invite/N7Yshp4) and also a lot going on in the Subreddit (reddit.com/r/FlutterDev). Many developers are also very active on Twitter.

I have put together a Twitter list: twitter.com/i/lists/1540588470950846466

And here are a few selected Twitter accounts.

Twitter Community

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

No particular order:

Learning Resources

Of course, and everyone will say this, the best resource is the official site and the respective documentation of the packages.

But on my way to the first Flutter project, the following materials helped me a lot.

And following Udemy courses I bought and watched individual chapters when needed during the development.

First steps

Dart

Coming from C# and Typescript, Dart wasn't too much of a hurdle. Long story short: I learned to love Dart.

Sure, compared to Typescript, certain tasks are more tedious, e.g. parsing JSON responses to objects. But the static analysis over the project works very well and is worth its weight in gold ;)

Everything is a Widget

At the beginning it takes a bit of getting used to, but with time it actually becomes very natural.

Flutter's declarative widget system has allowed us to quickly and easily implement specifications from UX designers. At a pace that I have never seen before.

Architecture and Code Organization

As with many things, Flutter is not very opiniated. It is up to the team to choose the appropriate architecture and also to determine the appropriate solution for the organization of the code.

Feature-first, layer-first - your choice

Configuration

I'm used to the framework already bringing solutions and making it easy for a developer to ship different environments. To my knowledge, there is no official solution.

Andrea has published a good article with a suggestion: codewithandrea.com/articles/flutter-api-key..

Hot Topics

State Management

docs.flutter.dev/development/data-and-backe..

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

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 (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 coming our way in the next few months. See also the talk of Remi at the Flutter Vikings conference 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 and calls it Riverpod Architecture codewithandrea.com/articles/flutter-app-arc..

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).

Detailed overview by @illiaromanenko: github.com/illia-romanenko/flutter_state_ma..

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 out of the box. 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 (twitter.com/ThomasBurkhartB).

Router

Not so long ago Flutter released a new Navigator 2.0. It offers a new declarative API and was received controversially by the community. It is said to be very complicated and hard to learn. (As far as I know you can use Navigator 1.0 together with Navigator 2.0).

There are several packages that aim to make the usage of the new Navigator 2.0 easier. We have decided on using the go_router package. There was a new major release just a few days ago: pub.dev/packages/go_router

We were missing the guard functionality of the Angular router. As a hint: most of the guard logic can be implemented in the redirect block of the go_router.

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:

• docs.flutter.dev/development/platform-integ..
• wilsonwilson.dev/articles/flutter-web-rende..
• medium.com/flutter/hummingbird-building-flu..
• medium.com/flutter/flutter-web-support-upda..
• medium.com/@GSYTech/how-to-optimize-flutter..

Testing Flutter Web Apps

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: 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.