Guide language | Flutter framework is now very popular across end solutions, can help developers through a set of code library effectively build more exquisite application platform, full support mobile, Web, desktop, etc. However, there are still many products, designs, and even development students who do not know about Flutter. Therefore, this article will briefly discuss Flutter design background, technical features, and the comparison with other similar technologies, hoping to communicate with you.

First, cross-platform background

1. The importance of mobile Internet

As the chart above shows, the number of people using the Internet worldwide has increased to 4.54 billion since January 2019, an increase of 7% (298 million new users).

By January 2020, there were 3.8 billion social media users worldwide, an increase of more than 9% (321 million new users) compared to the same period last year.

Worldwide, more than 5.19 billion people now use mobile phones, with the number of subscribers increasing by 124 million (2.4 percent) over the past year.

The average Internet user now spends six hours and 43 minutes a day online, which equates to more than 100 days per Internet user per year. If we need about eight hours of sleep a day, that means we spend more than 40 percent of our waking hours on the Internet.

In the wave of mobile Internet, development efficiency and user experience are equally important. However, to develop apps in a native way requires us to develop them separately for iOS and Android platforms.

As a result, we not only have to try to implement the same functionality in different languages from one project to another, but also take on the maintenance tasks that come with it. If you continue to expand to other platforms, such as the Web, Mac or Windows, the time and cost will multiply. This, of course, is unacceptable. So the concept of cross-platform development came into view.

In essence, cross-platform development is about increasing the reuse rate of business code and reducing the amount of work required to adapt to multiple platforms, thereby reducing development costs.

2. Three eras of cross-platform development solutions

A common view in the industry is to divide the mainstream cross-platform solutions into three eras, depending on how they are implemented.

(1) Web container era

Interfaces and functions are implemented through browser components based on Web-related technologies. Typical frameworks include Cordova(PhoneGap), Ionic, and wechat applets.

In the Web era, HTML5 page rendering is mainly carried out by the way of the browser control WebView embedded in the native application.

Due to the adoption of Web development technology, the community and resources are very rich, and the development efficiency is very high. However, the presentation of a complete HTML5 page goes through the loading, parsing and rendering of browser controls, and the performance cost is N orders of magnitude higher than native development.

(2) The age of the Pan-Web container

Developed using Web like standards, but rendering and rendering are taken over by the Native system at runtime, which are represented by frameworks like React Native, Weex and Fast Application, and also include Virtual View of Tmall in a broad sense.

The solution of the Pan-Web Container era optimizes the loading, parsing, and rendering processes of the Web container era, cuts down the Web standards that affect their independent operation, and supports the Web standards necessary to build mobile pages (such as Flexbox, etc.) in a relatively simple way. It also ensures a convenient front-end development experience.

At the same time, the use of native UI components instead of the core rendering engine, only maintain the necessary basic control rendering ability, thus making the rendering process more simplified, but also to ensure a good rendering performance.

That is to say, in the era of the pan-Web container, we still use the front-end friendly JavaScript for development, the overall loading and rendering mechanism is greatly simplified, and the native system takes over the rendering, that is, the native system is used as the back end of rendering. An entity that provides the UI controls needed for JavaScript code that relies on the JavaScript virtual machine.

This is how most cross-platform frameworks work, with React Native and Weex leading the way. To sum up, JS is actually used to call Native components, so as to achieve the corresponding functions.

(3) Self – painted engine era

With its own rendering engine, the client only provides a canvas to get a highly consistent multi-end rendering experience from business logic to functional presentation. Flutter is one of the few.

Flutter, the embodiment of this era, opened up a whole new way of thinking: to rewrite a cross-platform UI framework from the ground up, including rendering logic and even the development language.

The rendering engine relies on the cross-platform Skia graphics library to achieve this goal. The Skia engine will process the abstract view structure data constructed with Dart into GPU data, which will be delivered to OpenGL for GPU rendering. Thus, the rendering loop is completed. Therefore, the experience consistency of an app on different platforms and devices can be guaranteed to the greatest extent.

Dart, which supports both JUST-in-time (JIT) and AHEAD-of-time (AHEAD-of-time) compilation, has been chosen as the development language to ensure both development efficiency and execution efficiency (much higher than the pan-Web container solution developed using JavaScript).

Ii. The past life of Flutter

1. Historical background of Flutter

When developing applications with the same functionality for different operating systems, developers have only two options:

• Use native development languages (i.e. Java and Objective-C) to develop separately for different platforms;

• Use cross-platform solutions for unified development of different platforms.

Native development has the best experience, but the r&d efficiency and cost are relatively high; Cross-platform development is efficient, but in order to smooth out the differences between multi-terminal platforms, there are far fewer components and apis exposed in various solutions than in native development, so the r&d experience and product functions are not perfect.

Therefore, the most successful cross-platform development solution is the Web based on browser controls. Browsers guarantee that 99% of the time Web requirements can be fulfilled without the need for business “compromise” technology.

The biggest problem with the Web, however, is that its performance and experience differ appreciably from native development, so it is not suitable for more experiential scenarios.

React Native, which is closer to the user experience, has less than 5% of the support capability of the browser. It is only suitable for low-complexity and low-interaction pages. For slightly more complex interaction and animation requirements, developers need to review them case by case, or even extend them through native code.

With these questions, we finally usher in the hero of this time — Flutter.

Flutter is the SDK that builds Google’s Internet of Things operating system Fuchsia. It features cross-platform, high fidelity and high performance. Dart allows developers to develop apps using the Dart language, a set of code that runs on both iOS and Android. Flutter uses a Native engine to render views and provides a wealth of components and interfaces, which makes it a great experience for both developers and users.

So how does Flutter render its components?

This needs to start with the basic principles of image display. In computer system, the display of image needs the cooperation of CPU, GPU and display: CPU is responsible for image data calculation, GPU is responsible for image data rendering, and the display is responsible for the final image display.

The video controller then reads the frame data from the frame buffer to the display to complete the image display at a rate of 60 times per second.

As you can see, Flutter focuses on how to compute and synthesize view data between VSync signals of two hardware clocks as quickly as possible, and then deliver it to the GPU for rendering via Skia: Dart is used by the UI thread to construct view structure data, which is then layered in the GPU thread and then delivered to the Skia engine for processing into GPU data, which is ultimately provided to the GPU rendering through OpenGL.

2. About Skia

Skia is an open source 2D graphics library that provides a variety of commonly used apis and runs on a variety of hardware and software platforms. Google Chrome, Chrome OS, Android, Flutter, Firefox, Firefox OS, and many other products use it as a graphics engine.

Skia excelled in graphics conversion, text rendering, bitmap rendering, and provided a developer-friendly API.

Therefore, Flutter, which is built on top of Skia, has complete cross-platform rendering capability. Through deep customization and optimization with Skia, Flutter minimizes the differences between flatscreens and improves rendering efficiency and performance.

Once the underlying rendering capabilities are unified, the upper level development interface and functional experience are unified, and developers no longer need to worry about platform-specific rendering features. That is, Skia ensures that the same set of code calls render exactly the same on Android and iOS.

Also, Flutter has been optimized to improve the rendering and rendering efficiency of the interface.

3. Advantages of FLutter

(1) The same UI style and business logic can be maintained on all platforms

The UI in most cross-platform frameworks looks like this:

While Flutter is drawn directly on canvas:

(2) Reduce development time

• The thermal overload of Flutter can see changes quickly and efficiently, and even retain the application state.

• A variety of off-the-shelf components are officially available (Material and Cupertino).

(3) Rapid iteration online

The UI layer of iOS and Android terminals does not need to be adapted separately.

(4) Performance closer to native

Flutter does not rely on any intermediate code and is ultimately built directly into machine code, improving performance.

(5) Custom complex animation

One of the biggest advantages of Flutter is that it can customize anything you see on the screen, no matter how complex it is.

(6) Have your own rendering engine

Flutter uses Skia to render the interface onto the canvas provided by the platform, meaning that it can be migrated to other platforms without adjustments.

(7) More convenient to call native API

Obtain GPS coordinates, Bluetooth communication, sensor data collection, and permission processing. You can also use Platform Channel for unsupported applications.

(8) Higher potential

IOS, Android, Web, Desktop…

3, Flutter and React Native (Hippy)

1. The UI

It is also consistent between old and new devices

Flutter animation effect:

2. Performance

Based on the ListView, we did a benchmark test. In the ListView, where there are 1000 elements and the scroll time to reach the last element in the list is the same, some third-party libraries are used:

• ios Nuke

• Android Glide

• react native React-native-fast-image

Results show:

3. The Flutter

• The size of the developer community and third-party libraries

• Continuous integration capabilities

• The size of the APK

• Dart language learning costs

• Dynamic update capability