In our constantly developing, digital world the use of mobile phones plays an essential role in the everyday life of billions of people. According to Statista’s forecast on the number of mobile phone users, currently (in 2021) there are 7.1 billion mobile users worldwide. The prognosis also indicates that by the year 2025, there will be 7.49 billion users. The following graph visualises the numbers broken down into years, from 2020 to 2025.

‍

As a result of this tendency, the development of mobile applications is also playing an increasingly important role. Beforehand, there was no single programming language that could be used to write native applications for different platforms, therefore if you wanted to create the same application for Android and iOS operating systems, you had to write the same application in two different languages. Today cross-platform technologies provide a solution for this problem. One such example is the Flutter framework, with which we can develop for iOS and Android by using a single code base. In Flutter the way of coding is different than usual, developing in this framework is a bit reminiscent of the video game development process. With the help of Flutter, developers can easily and quickly create beautiful user interfaces, not only for mobile phones but for desktops as well. Another advantage is that it provides almost native performance due to the Dart native compiler of the programming language it uses. This article aims to give the reader insights into how Flutter works and explain the advantages of the framework by describing the structure and essence of it. 

Dart language

The Flutter framework operates perfectly with the Dart programming language which is developed by Google. Dart’s purpose is to replace the main language of web browsers, JavaScript. One of Dart’s best features is the Hot Reload function, which allows the developer to see the changes almost immediately and runs quickly on all platforms. The Hot Reload function greatly helps the work of programmers, since it can save a tremendous amount of time to develop applications. For instance, in case of larger native projects, the build time could take up several minutes but Dart’s Hot Reload function can reduce it to almost zero. Its syntax is similar to other known languages such as Kotlin, Swift or TypeScript. You can't write complex Flutter applications without writing Dart code, since the logic is written in this language. One of the most interesting things about Dart is that it also serves as the basis of Fuchsia, which is an open-source effort to create a production-grade ecosystem. Fuchsia is still a work-in-progress framework with community contributions and promising ongoing developments.

The popularity of Dart can be largely attributed to the release of Flutter in May 2017, as the framework uses this language. Even though Dart and Flutter would stand their ground separately, together they could achieve even greater success in just a short period of time, not only because of their greatness but also because of their ever-growing and helpful communities.

Flutter

Flutter is a free and open-source programming framework, which lets developers create cross-platform applications. But how does it actually work? Coding in a Flutter framework requires the Flutter SDK (Software Development Kit). The concept of SDK in programming means all the tools, libraries, relevant documentation, example codes that make it easier for the programmer to perform the desired task. One of Flutter’s main features is that everything you see on the screen is a widget, which is the basic building block of a Flutter application. The properties of a widget describe how it should appear on the screen based on its configuration and state. 

Flutter’s architecture is different from the other frameworks, since it resembles more the operation of game engines. At the highest level, there are the Widgets, which are rendered on the canvas by Skia and are transmitted to the platform. The platform makes this canvas visible, then, if an event occurs, it is returned. The following figure illustrates the Flutter architecture.

The Flutter platform provides a specific Shell that houses the Dart VM (Virtual Machine). The Shell gives access to native platform API (Application Programming Interface) calls and a platform-specific canvas. In addition, the application lifecycle events also have a communication capability offer. The core of Flutter is the engine, which is mainly written in C++ and it is responsible for redrawing the screen when needed and updates the user interface by 60 fps (frame per second). Apps made by this framework can look the same as native iOS or Android apps, by using the right themes. Cupertino is used to create iOS themes, while Material follows the Material Design of Android. Naturally, it is also possible to create theme-independent applications.

Advantages

The Flutter framework is paramount for developers. It contains everything they need in order to create an application by offering the following features:

• A modern and reactive framework.
• Dart programming language, which is quite easy to learn.
• Google support.
• Fast-paced development process due to the Hot Reload functionality.
• Reusability of the code.
• Beautiful and fluid UI.
• Huge widget catalog.
• The ideal framework for building MVP (Minimum Viable Product).
• High-performance application.
• Open-source.
• Multiplatform (Web, Desktop [Windows, macOS, Linux], Embedded System).
  
  

Besides the numerous useful features, gorgeous and customisable widgets and high performance, Flutter has even more advantages. Such a benefit for example is that it needs fewer testings. Due to the use of a single code base, it is sufficient to write an automated test for both platforms only once. Another great advantage is that thanks to its simplicity, Flutter enables really fast development. Additionally, huge corporations and companies, such as BMW, Alibaba Group, eBay, Tencent and Nubank are all successfully using the Flutter framework because of its trustworthiness and production-readiness.

Disadvantages

Though Flutter is an amazing new tool, it has some flaws as well and we should mention the areas where there’s room for improvement. One of them could be Dart itself, since it is a new programming language and developers need to learn it from scratch. Another disadvantage could be that in Flutter’s case the UI and the logic are intertwined, whereas it is more preferable to separate these concepts in case of modern frameworks. In addition, Flutter suffers from the lack of tools for continuous integration and has limited options of libraries as well. It is also worth mentioning that an APK that is created from a brand new Flutter application and contains almost nothing, takes up around 7 megabytes of space, which is quite much compared to the APK of a native Android app. And finally, in certain cases we need to communicate with native APIs in native code, especially if we do not have a suitable library, therefore we will not be able to code everything solely in Dart.

Flutter or React?

After taking a look at Google’s unique cross-platform solution and seeing what it is capable of, what about the other famous framework, React Native? React is developed by Facebook and it is also quite popular amongst programmers, therefore it seems evident to compare it with Flutter. Well-known applications such as Facebook, Instagram, Skype and Pinterest are all developed in React, which uses the JavaScript coding language. Similarly to Flutter, React Native is also capable of cross-platform development, letting programmers develop both Android and iOS applications by using a single code.

To achieve native components React Native uses JavaScript bridges and that is why React Native is lagging behind Flutter in performance because the latter doesn’t need this extra layer. Although JavaScript is a much more popular language than Dart in the world wide web, React Native itself is made for web developers mostly. In contrast, Flutter is finally the first cross-platform solution specifically targeting mobile developers. However, it is important to note that Flutter web support hit the stable milestone as part of Flutter 2 on March 3, 2021.

Conclusion

So why should developers use Flutter instead of other frameworks? As you could see, the use of Flutter has lots of benefits and more and more companies are interested in adopting the Flutter toolkit. Backed up by Google, Flutter can achieve even greater success in the future, mainly because Google's software engineers are constantly improving the framework and keeping it up to date. Moreover, Flutter is now opening to a bunch of new platforms, and if those platforms can reach a steady state too, that would be an immense achievement for the Flutter community.

Coding in Flutter is completely different from developing natively for Android or iOS, but for its simplicity, it may be worth it to at least give it a try (even if you don’t want to switch permanently). On the other hand, many companies don’t want to switch to Flutter, as the company’s developers would have to learn a whole new technology, which would take some time. The time it takes to learn the basics of Flutter would certainly return, as in Flutter most UI functions can be developed much faster and more conveniently than in native development.

Flutter also can be integrated into existing native applications as a library or module. By using Flutter, we can easily start to rewrite old legacy codebases. Besides that, Android and iOS engineers can collaboratively work on different aspects of feature development.

We hope that you found this blog post useful! Do not hesitate to follow us, so you won’t miss interesting stories in the future either. The professional content of this blog post was provided by Omar Eltigani, Flutter Developer and Csongor Vogel, Android & Flutter Developer at ff.next. Bence Siklós, Business Analyst and Melinda Havas, Head of Business Development & Marketing formed the material into this English article.

Sources:

https://fuchsia.dev/ 

https://blog.codemagic.io/flutter-vs-react-native-a-developers-perspective/

https://flutter.dev/showcase 

https://www.statista.com/statistics/218984/number-of-global-mobile-users-since-2010/