Originally published on 06/02/2020

I have been looking for hybrid mobile solutions for some time now without having to learn Android (Java) or iOS (Objective-C). As a backend developer, I wanted a practical solution, which had pleasant documentation and that required a relatively low learning curve.

As I am not a big fan of creating components from scratch, I was also looking for a set of ready-made components that were highly configurable and, finally, that were also performative. It was not too much to ask, right? I was looking for something that each and every programmer wants when they are going to get to know something new.

The big problem is that all solutions I found along the way only partially fulfilled the requirements that I set. In general, they had weaknesses in performance and native experience (as it was the case of options such as WebView or Bridges).

The challenge was on, and I was excited about the discoveries I would make in the process. And yes, of course I thought about React Native! I will come back to this point yet, but I want to tell you better about my entire journey to learn Flutter on this post.

Learn Flutter

When I got in touch with Flutter for the first time, it was in its first Beta version and had no 1.0 version.

I was surprised to find that there were already some apps in the process of development even on Flutter’s Beta version. There were few of them, of course, but they already had several animations and features that were essential for a great app functioning.

If you did not already know, Flutter is supported by Google. This connection made me feel sure that Flutter is here to stay, especially after Google heavily invested in marketing, tutorials, and Flutter’s own development team.

Another curious fact concerning Flutter is linked to its use of the Dart language, which was created by Google in 2011. At that time most programmers had never heard of Dart - and I include myself on that list.

Dart was my first hurdle related to Flutter. Anyway, I decided to dig deeper and find out more about Flutter. It is worth sharing with you what I have learned.

The Dart Language

I confess that at first I had some resistance to Dart and its typing. My background is in PHP, so I always tried to type everything I could - and even then I faced challenges with Dart.

However, I did not give up and I accepted this idea soon. Along with an IDE (integrated development environment), I started producing. It is noteworthy that, even at the beginning, I was able to produce something. This only made me sure that Flutter would have the low learning curve I was looking for. Of course, I say it because I was already programming in another language.

What was a barrier at the beginning became something positive for me. Finally, I noticed that, due to the fact that Dart required typing, I made fewer Runtime, and Syntax Errors. It happened because the IDE always showed me the right method, and because there was an indexing on top of the Dart Objects. Compared to Javascript or Ruby, for example, it is much simpler.

Furthermore, what makes Dart the perfect language for Flutter is the support for JIT (Just-in-time), facilitating development (Hot reload), and AOT (Ahead-of-time), which is highly performant in development.

Why did Flutter catch my attention?

After understanding Dart, I was able to focus my attention on learn Flutter.

What caught my attention the most is that it was thought to solve a problem: code duplication in mobile world. Just having that single goal made me build more confidence that it would be a powerful tool.

Another peculiarity of Flutter is that it is an UI framework; that is, it was created to allow you to control your application’s UI. In other words, we can say that processes are created for this kind of optimization, and performance.

Since it is built for UI, it is only fair to come with a lot (but a lot!) ready-to-use components. And that is exactly what the framework delivers natively, thus giving you the certainty that that component or widget will be rendered in the most performant way possible.

Speaking of performance, Flutter improves it because it has no bridge whatsoever, and it renders widgets directly on the system using Skia Engine, thus generating less problems and bottlenecks than the use of bridges presents.

How Flutter renders your widgets

How Flutter’s architecture work

Flutter does not come with a standard or recommended architecture. For some this may be considered a turning point, but for me this is positive. After all, it is possible to develop as desired and thus to mold a solution to the problem.

I had seen something like this on Vue before. Working with Vue I felt free to create the architecture that would fit specifically to my project.

Another important point worth mentioning is the “State Management in Flutter”. Even after some time using Flutter I still could not decide which type of State Management I preferred. Today, there are some options, such as SetState (native), Mobx, Bloc, Provider, Redux, among others, each with its own peculiarity, and popularity.

For those starting out, Provider is a great option, as SetState can be harmful for the application. Bloc, in spite of being one of the most used ones, is more complex, dense, and it needs some study before practicing.

As Provider is very similar to other State Managers that I learned in frontend, it is my choice today for the architectures I create.

Google Fuschia: The new operating system used by Flutter

Fuschia is a new operating system from Google that is coming to compete directly with Android (which is also from Google). Yes, that is right.

The interesting thing about this operating system is that it is also written in Dart and uses Flutter as a GUI SDK.

It is noteworthy that initially the applications developed for Fuschia will run on top of Flutter, right after the launch of Google Fuschia. So if you learn Flutter, you are sure to be ahead of the market.

Flutter is not always a bed of roses

Like every framework, Flutter is not perfect. It still has certain problems nowadays. I share with you a few:

• Dart language: As I mentioned on this article, the use of the Dart language challenges many developers and companies when they choose this framework;

• Community: Those who come from Javascript, for example, will feel a difference concerning community participation. As with any new tool, this community building process takes a while to grow. We were able to see this clearly through Google Trends, and StackOverflow.

Number of questions on StackOverflow

Google Trends search results

Even with this difference, I always got answers to my questions in Flutter, whether by StackOverflow, Medium or Google. Another tip is to pay attention to Flutterando, which is the largest Flutter community in Brazil.

Anyway, why did I choose to learn Flutter over using React Native?

It is normal that React Native be the first name to pop up in our minds when thinking about a framework for mobile development. After all, it is written in JavaScript and uses bridges to render the components.

In fact, React Native is already well established in the market, and for a new programmer who is looking for a job Stack JS is always a great option. However, as much as we have many apps in production with React Native, there is still a big difference in performance between React Native and Flutter.

CPU-intensive test (Gauss–Legendre algorithm) for iOS

What’s interesting is that in some cases Flutter is even more CPU-performing than Swift.

In addition to performance, it is noteworthy that in React Native one needs to use third-party packages most of the time - which in my view creates dependency on packages that can be discontinued at any time.

So, I found on Flutter a great tool to draw UI with a great performance, almost comparable to a native one. It is thus possible to build apps with native experience for Android, and iOS with just one code.

Also: using Dart as the base language, Flutter supports JIT (Just-in-time), which makes it much easier during development, and AOT (Ahead-of-time), which helps a lot in performance when running in production.

The community is growing and already largely meets the needs of the projects. Besides, as Flutter is supported by Google, there are good guarantees that Flutter is really here to stay.

I think it is important to emphasize that I don’t condemn React Native or any other framework or language! However, I myself use other options in some cases, because one thing is certain: one technology does not exclude another. The goal is to use the best option for the problem you are looking into solving.

And you, are you excited to learn Flutter?

References

Flutter vs Native vs React-Native: Examining performance, The Startup

The Engine architecture of Flutter, Github

Flutter Docs

Google Fuschia: Mais Detalhes Sobre o Novo Sistema Operacional do Google, Velho Bit