Blog

Flutter. Still the next big thing?

Mobile Development
We live in a mobile world and during the past two decades, mobile phone technology has changed a lot. As the global number of mobile phones is growing steadily the number of mobile apps is also projected to increase. A survey published in 2021 shows that in 2019 mobile app revenue reached 462bn USD and in 2020 users downloaded 218bn apps worldwide. More and more companies are taking their business to mobile apps. However, when it comes to app development choosing the right technology may be a big challenge.

If you’re planning an app for one specific platform, native development is probably what you need. It gives you good functionality and app performance, fewer errors, and easier deployment. But if you’re more interested in functioning an app on two different platforms saving in that way time, effort, and money cross-platform development can be a valuable option. Basically, in more recent years cross-platform technologies have reshaped mobile development a lot giving opportunities to build apps across iOS, Android, and web with less costs, faster time-to-market, and customization.

In this article, we will talk about Flutter: its nature, technical features, strong and weak points, its main competitor - React Native, popular apps developed in Flutter, and will try to figure out whether Flutter is worth investing in. 

Cross-platform framework: Flutter 
According to the statistics, the most popular cross-platform framework used by global developers recently is Flutter.

Source: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/

Flutter is a Google product presented in 2015 and developed as a good new option for the development of mobile (Android, IOS), desktop, and web applications with one codebase. The initial release was launched in May 2017 and a stable one was announced in December 2018.

Flutter: overview
Flutter is a free and open-source framework based on Dart language to develop cross-platform (mobile, web apps desktop) apps from a single code base.

The major components of Flutter include:
  • Dart platform
  • Flutter engine
  • Foundation library
  • Design-specific widgets 
The Flutter framework has a layered structure. Every part of the framework is designed to be optional and replaceable. The low-level of the framework is an engine that is written using C++. The engine provides low-level rendering using Skia, Google’s graphics library. At the upper layer is the Framework in the Dart programming language. It provides a collection of libraries to support animation, gestures, rendering, widgets, and more.

Source: https://flutter.dev/docs/resources/architectural-overview#architectural-layers.

Features of Flutter: 
  1. Comprehensive documentation
As for any programming language, it’s important to have robust documentation to refer to. So if you want to start with Flutter and try to explore the functionality, Google prepared well-organized extensive data covering tutorials and samples for beginners, development, testing & debugging, performance, and more.
  1. High performance 
While developing an application using Flutter, you will require less number of developers as you don’t need to write any platform-specific code for multiple platforms such as Android, iOS, etc. Aside from this, Flutter offers widgets and design which simply need to be compiled and converted into platform-supported code. This helps to cut the developer’s time hugely.
  1. Faster development
Flutter offers a quick compilation:  AOT compilation which allows Flutter to communicate with the platform without going through a JavaScript bridge and during development Flutter uses a JIT compiler that provides fast hot reload of executed code.
  1. Dart programming language
Dart is an object-oriented language that was first announced by Google in 2011. Dart's feature is that it could be compiled both AOT and JIT. JIT compilation is used during development and when the app is ready for release is used AOT compilation. Combining two compilers provides Dart to deliver fast development cycles and fast execution and startup times.
  1. “Hot reload”
Hot reload feature helps to add features, fix bugs while the Flutter app is running and it will reload the app’s code often in less than a second to see the effect of changes. It facilitates developer-designer interaction a lot by providing an opportunity to see the changes in the code in real-time.
  1. Beautiful and fluid user interfaces
Google created two sets of widgets that are responsible for the UI: Cupertino (IOS) and Material Design (Android). They are not connected to native API but work as standalone components of Flutter.
  1. Beautiful widgets
Almost every aspect of the Flutter development is covered by a widget. Flutter offers two types of widgets: stateful and stateless widgets. Stateful widgets are those which get rebuilt when the state is updated or changed, stateless - are not state sensitive. Widgets are customizable and extensible.

Flutter: Pros and Cons
Advantages of Flutter:
  • It’s free and open-source;
  • Provides reactive views without a need for a JavaScript bridge;
  • Both AOT and JIT compilations;
  • Beautiful, customizable widgets;
  • Lesser testing because of single code base which provides to write automated testing for both platforms simultaneously;
  • Hot reload feature for instantaneous updates;
  • Fast development and high-performance;
  • The app UI and logic don’t change depending on the platform.
Disadvantages of Flutter:
  • Needed to learn a new language - Dart;
  • Relatively small pool of developers;
  • Still lack of third-party libraries.

Flutter vs. React Native: What’s the difference?
React Native is a well-known open-source framework for cross-platform development and a main competitor of Flutter. If Flutter is a new framework, React Native has already gained a reputation and popularity among developers. So what’s the difference between Flutter and React Native? Firstly, the programming language Flutter uses Dart and React Native - JavaScript. Flutter was created by Google, React Native - by Facebook. Speaking about the general performance, React Native compiles JS code into native during runtime using Facebook’s Flux architecture. The connection of native modules with JS code is done by JS bridge which makes the app work slower.

Source: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html

In the case of Flutter, it doesn’t require an interpreter as a “bridge” to connect to the platform's native modules, therefore it’s faster. The Dart code is AOT compiled to ARM native code. Additionally, Flutter has its own 2D graphics Skia engine written in C/C++ which broadcasts the image directly to the screen. This makes animation quicker and smoother. React Native cannot achieve fast animations (60-120 fps) due to the converting process.

Considering the comparison above, React Native is built on top of native and Flutter is a natively compiled framework. That’s the difference between React Native and Flutter.

Flutter or React Native: which to choose?;
Based on the analysis above we can definitely say that both frameworks are excellent cross-platform toolkits. They both offer faster development and help to reduce project costs. However, when we need to choose one for a specific use case, what framework is better?

  • Flutter is a perfect tool for apps that require fast performance as it’s compiled to ARM or x86 native libraries it makes the app extremely fast. Flutter is great for MVPs developing that are smooth, fast, and easy to use. 2/ If you have an app with a UI focus, Flutter would be a way to go because it has its own library of widgets that are customizable. Thanks to Skia Graphics engine all UX/UI 100% shared between all platforms so that Flutter offers smooth animation and delivers 60fps (frames per second);
  • React Native is a good option for apps that are not complicated, small mobile apps. The main reason is that apps on React Native are slightly slower than on Flutter as it’s not compiled and has a native layer;
  • At the same time as React Native is based on JavaScript language, it facilitates the search of developers and makes the framework more popular
  • If you’re planning to build your app’s GIU using native UI components, React Native is your choice.

Flutter or React Native: hourly cost of a developer
One more thing to add is the price, precisely the cost of the app development whether you decide to hire a Flutter or React Native developer. Of course, there are many things to consider (project complexity, level of expertise, location, etc.) but to give you an idea very roughly how much the project budget may be, we offer to compare the average hourly rate of a React Native and Flutter developer based on its location.

We've analyzed the data by September 2021from www.talent.com, www. ziprecruiter.com; the average Flutter developer salary in the United States varies 97,446$ - 110,000$ per year, so the average hourly rate is 46,85$ - 52,88$ per hour. The average React Native Developer salary in the USA is 117,277 $-121,875$ per year or 56,38$-$62.50 per hour. Speaking about Eastern Europe, the average Flutter developer's rate within average development agency in Belarus is about 35$, while React Native developer costs around 34$.

Conclusion: Is it worth it? 
Summing up this article, we can say that Flutter is a relatively new framework that is gaining popularity very fast. If you want to build an app on budget and a faster development cycle Flutter is the best choice. The price range slighly differ from React Native framework, it’s main competitor, but at the same time offer much more advantages. It is loved by the developers as it provides faster coding, high performance, and less testing. It is requested among start-ups and many tech companies as it helps to create visually attractive and cost-effective applications. 
Of course, choosing the right approach as well as technology always depends on the nature of your project and requires considering all pros and cons of each solution.  
Nevertheless, it’s worth trying Flutter building mobile apps, especially if you want apps for both IOS and Android platforms.