Globally, there are about 5 billion smartphones, according to various estimates, up to 80% of them use the Android operating system, and less than 20% use iOS. And yet, each country has its own characteristics, for example, in the United States more than 65% of smartphones work on iOS. Therefore, when creating mobile applications, it is most often required to release versions on both iOS and Android, using either native or hybrid (cross-platform) development.

Currently, React Native and Flutter are the most active players in the game for most of the new hybrid projects. Unlike React Native, Flutter is just an infant in the development world. So, what do we know about Flutter? What can Flutter do? When should Flutter be used? How is Flutter different from Native and its mate React Native?

This article could help you figure them out.

What is Flutter?

Flutter is a free and open-source mobile UI framework created by Google. In a few words, it allows you to create a mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter is not a framework but rather an SDK for applications designed for a touch screen. Its primary purpose is to work with iOS and Android devices but can run on other platforms as well. Therefore, Flutter consists of two important parts:

• An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
• A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) for your own customization.

“Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.” – Google, flutter.dev

Who benefits from Flutter?

It can be especially interesting for:

• Startups, e-commerce and all tech-related companies that want to build a faster, more efficient 2D app and release it on all available platforms at the same time
• Programmers — because it makes coding faster, more efficient and compatible
• Designers — who want to build great-looking, modern applications that meet the standards of both common mobile platforms.

How does Flutter work?

To develop with Flutter, you will use a programming language called Dart. This is a relatively easy object-oriented programming language with many useful features when building a native application.

As for the interface site, Google’s framework uses Skia, an open-source 2D rendering engine. This set of components allows creating UI in a way — for those of you familiar with game development — engines like Unity allow creating games.

In addition, everything in Flutter is a custom widget created to look natively both for iOS (Cupertino) and Android (Material Design) devices. The whole UI design is all about combining those widgets, including text, shapes, animation. They determine even aspects of the layout like padding. You can even build your own complex widgets from simpler ones.

Pros and cons of Flutter

Advantages of Flutter

1. Allows to build iOS and Android apps at the same time

Because iOS and Android apps built with Flutter use the same code base, there is no need to develop for one system and then repeat the process for another. Apps made in Flutter work on both Apple and Google platforms seamlessly. That means less coding for your development team and more business opportunities with a simultaneous launch on both platforms.

2. Speeds up coding and prototyping

If there is one aspect that should convince anybody to use Flutter is its hot reload. This feature allows seeing any changes made in the code almost in real-time, with no need for app restarting. The updated source code is injected into the running app and Flutter automatically rebuilds the widget tree so that changes are seen in real-time. Hot reload speeds up the process dramatically and also improves the whole process helping the developers to identify bugs as soon as they appear and test new UI or features without tie-ups.

3. Great performance

Since Flutter is not using any OEM widgets and there is no JavaScript bridge for reactive views, the app performance (especially startup times) is noticeably faster than in non-Flutter apps.

4. No compatibility issues

All widgets and their renderers are part of the app, not the platform. There is no need for any additional libraries to ensure compatibility with iOS and Android devices. There are some restrictions, though. Running Flutter is possible on iOS 64-bit devices and all Android devices above 4.4 or 4.1. with software rendering.

5. Open-source

Flutter is an open-source tool which means it has countless possibilities of customizing almost everything in the framework — from Material and Cupertino widgets to animation and gestures.

Disadvantages of Flutter

1. New language

Although Dart is an easy language to learn, it’s still a language to learn. That is why, since Flutter is only several months on the market, the first steps could be tricky for those who look for some online help and support from the community.

2. Suited for universal apps

Flutter’s biggest advantage — building native-looking iOS and Android apps using the same code base can be its biggest disadvantage for some. It is a framework designed for universal, cross-platform apps. Using Flutter for platform-specific projects that use the platform provided views or are in any way tied more to one platform than another is not the best choice.

3. Apps cannot be smaller than 4MB

Because Flutter-made apps are using built-in widgets not platform widgets, their size is usually bigger. Right now the smallest possible app made with Flutter can weigh no less than 4MB, but the Google team ensures that they are working on optimizing it even more.

4. A new, unstable tool

Like all new tools, Flutter can experience problems of relatively fresh technology. Typical concerns include not coping with changes in the UI of iOS and Android for example. Some developers also claim Flutter is still not mature enough to handle big, e-commerce applications — but Tencent and Alibaba’s examples seem to prove otherwise.

Selection Criteria for Native and Hybrid (Flutter/React Native)

For business

1. Time scale and complication level

Native technologies are often applied when the application is designed for long-term operation (in other words, “life span”). It is also beneficial if there is a need for high performance, a complex interface and animation, low power consumption, integration with third-party resources (API, etc.). Native applications are more profitable in the long run due to lower technical support costs.

On the other hand, cross-platform technologies (Flutter, React Native) is used for quick hypothesis testing, development of prototypes and applications with a clear limitation of the operating life, for example, apps developed for certain events.

Memo for business:

• For complex applications – native development is recommended;
• For simple applications – a hybrid (cross-platform) technology like Flutter and React Native.

2. Speed and task matching

Speaking about the development time of a mobile application, it is also important to understand that there is no “average time”. There were simple applications (launch time lies between two or three weeks), and large-scale projects with a development period of more than a year – meaning there is no fixed period for the development of a mobile app. Time to market is determined by the size of the development team and the complication level of the features, rather than any general estimation.

If the application is simple: using the same UI, no platform-specific details such as access to the camera, working with the file system and fingerprints or runtime permissions, working with cross-platform frameworks can be faster and more profitable. Hereof, hybrid development saves time by reusing almost all of the code and the UI for two platforms. However, if you need to create complex custom views, cross-platform development like Flutter or React Native may slow you down.

3. Security and prospects

When choosing a language, it is important for a business to evaluate its reliability and safety from a technical point of view, as well as prospects for further development, and the risks of obsolescence.

In terms of reliability, native development is ahead of all its competitors. The development of the main libraries has been going on for several years, most functional bugs have already been fixed in them, native languages ​​- such as Java, Objective-C, Swift, Kotlin – are constantly evolving.

React Native provides all the tools for creating secure mobile applications, for example, Skype, Instagram, Facebook and other well-known products. Security concerns are only possible when using third-party modules during development. At the same time, JavaScript is actively developing, new features are being released, in the foreseeable future, the risk of obsolescence is minimal.

In the case of development on Flutter, the risks are higher since the framework is young. According to a recent survey by inVerita where they compare 4 projects developed using different technologies: Native (Kotlin, Swift), Hybrid (React Native and Flutter), the number of cosmetic bugs in the Flutter-project is reduced in 4 times in comparison with Reactive Native and twice in comparison with native applications. There’s no regression in the number of functional bugs. This shows that Google has done a very good job of finalizing the problems and improving the app for better competitive ability.

For developer

Above, we described the factors that influence businesses and contractors. There are also technological criteria that project managers and developers shall take into account. For example:

1. The level of knowledge of native languages ​​and team preferences

Each team has its own preferences in the choice of technologies. Native development requires the most complete knowledge of the respective languages. However, due to the use of native tools of the systems, there are fewer restrictions and difficulties when customizing or accessing platform-specific tools (unlike React Native and Flutter). If you have experience in JavaScript, a mobile developer can easily switch to React Native (no need to additionally learn the Dart language, as is the case with Flutter) or to Dart (knowledge of TypeScript will be a big plus).

React Native uses native modules under the hood. As a result, if there is a need for customization (and this is not supported out of the box), it is necessary to work with native modules.

Flutter, unlike React Native, stands out with its own graphics engine. On the one hand, this allows you to not touch native at all when developing simple applications. On the other hand, if you need to access native, this means additional difficulties (for example, messaging with elementary data types and JSON) and the inability to use graphical components of native.

2. Entry threshold

If the developer decides to learn a new language, the availability of the community, as well as background information and documentation, becomes an important issue.

Flutter and React Native are constantly evolving, they have an active professional community and good documentation. At the same time, native development is ahead of the frameworks, thanks to a larger community and more training materials and forums, which describe the development processes of complex components.

In case you want a further comparison of 2 hybrid technologies: Flutter and React Native…

Once you go down for Hybrid, the next big step is to decide on whether it is going to be Flutter or React Native. Each has its own perks, but since we are seeing the situation through a “Flutter” perspective, we would say despite its younger age, it is sure to be catching up.

There are more and more people taking interest in Flutter, fueling its disruptive growth in these few years. On GitHub, Flutter is currently achieving 89.2K stars against 85.8K stars of React Native. Topics about Flutter on stackoverflow.com are piling with hundreds of votes per question. It is also recommended by my professionals that Flutter is thriving in MVP (Minimal Viable Product), helping businesses to power their lean start-up with a simple and optimal mobile app.

Flutter is gaining huge popularity, and it creates an edge of a large community, allowing the users to be supported anytime during a short life-cycle of an IT project. Still, if you are making the choice between Flutter and React Native, we advise you to pay attention to the following aspects of work:

1. Assessment

You need to test all the platforms involved (iOS, Android). It is important to objectively assess the level of knowledge and experience of all project participants so that the rating in hours does not turn out to be underestimated. Consider the risk of bugs in the React Native and Flutter frameworks themselves during development.

2. Design

Some elements are difficult (or even impossible) to render in Flutter or React Native. For this reason, the design must be agreed with the developers – and before the customer falls in love with a beautifully drawn picture.

3. CI / CD

On React Native, specific problems with auto-assembly are not ruled out (for example, due to the installation of libraries on different platforms). Need to lay more risk reserves.

4. Splash screen

Implementation on Flutter is faster than on React Native, where this element can only be drawn natively, with a high probability of bugs. When using React Native on a splash screen with all rendering and bug fixes, it is advisable to lay more time.

5. Parallel development of web and mobile

If the web version of the application is written in React, less time is spent on developing a mobile application on React Native – due to the logic of the same components.

6. Layout

When using React Native, layout on iOS and Android must be done simultaneously in order to avoid problems when adapting layout for one of the systems.

7. Debug

If the application is large, React Native makes it easier to test and unit tests. On Flutter, you need to lay more time on the bug fix, since the logs are not informative.

8. Work of the application with system files

It is necessary to request permission to SD-card, while it is not possible to get a name and path with every file. To send a file, you must use ContentResolver. In order to minimize risks, allocate the time for all operations related to the file system.

9. Delivery of assemblies to the client

There are no significant differences from the native development, you can choose any convenient service: Crashlytics, TestFairy, TestFlight.

Wrap up

Whether Flutter is a fit to your company depends largely on your expectation upon the mobile app (time scale, speed, complication level,…). If you are looking for a simple yet stunning and convenient platform, Flutter might be the one. Otherwise, you shall consider other alternatives, such as Native or React Native.

In our company, we have a skeptical attitude to different kinds of “silver bullets”. We must be confident that the technologies we use will benefit us and our customers, and that benefits must be long-term – not a short-lasting one with a tough “hangover” afterward. Therefore, we make sure to assess the compatibility of your requirements to each technology and suggest the best suit for you. In case you need further consultation on how Flutter matches your future mobile app, feel free to contact us via:

• Phone: +84 24 3202 9222
• Hotline: +1 408 663 8600 (US), +84 32 675 2886 (Vietnam)
• Email: contact@savvycomsoftware.com

Source: Savvycom