Author: Ling Qing
The information in this article refers to the latest progress and development of Flutter by Google Flutter team. The purpose of this article is to expand your technical horizon, understand the origin and principle of flutter, and play a guiding effect that leads you into the big front-end world! In the future, there will be a series of articles about Ultron Flutter SDK. Currently, the Astron Ultron Flutter SDK has been launched on ICBU international station.
Why should every big front-end learn flutter? Why are the groups building Flutter? Why does Flutter help dissolve the barrier between ios and Android? Why are H5 pages on mobile being replaced? Why did starring SDK also release the Ultron Version of flutter SDK? Let’s also go on a journey to expand our vision into the mobile world!!
Introduction to Flutter
What is flutter? How does Flutter achieve cross-platform capability? Flutter is a Google-led open source UI toolkit that helps developers implement cross-platform, high quality native applications across mobile, Web and desktop platforms. Its 1.0 release in December 2018 marked flutter’s readiness for mobile production applications.
How Flutter differs from various cross-platform frameworks
How does Flutter differ from the various cross-platform frameworks that have been explored before? It can be divided into four aspects
- Aesthetics: The first mobile app built with Flutter achieves a very high visual standard. It uses Skia’s 2D rendering engine, giving developers direct and precise control over every pixel on the screen
Figure: Flutter architecture diagram
The reason why flutter can achieve pixel-level control and high performance is actually related to its system architecture. The main pixel rendering capability of flutter is achieved by the flutter engine written in C++, which is built on the skia 2D engine. This includes the Dart Runtime and THE Dart UI library. On top of the Flutter Engine, there is the Flutter UI framework that can implement pixel-specific rendering for different design languages.
- Fast: Flutter’s UI rendering performance is particularly good because it is coded into native machine code for execution in a production environment. It takes full advantage of the GPU rendering power on every phone and optimizes the hardware itself, so that applications written with Flutter can achieve a rendering rate of 60 frames per second on low-end phones, with GPU acceleration
3. Efficiency: There is one feature that developers love: Hot Reload allows code to be subsecond, i.e. less than 1 second, to the UI that you are running, so that UI developers can achieve a very fast iteration effect, and hot Reload preserves the STATE of the UI. Why is this important? Because sometimes you’re making a quick change to a sub-page, and every time you refresh the page, you don’t want to go back to the start page and click all the way to the sub-page. Hot Reload with state allows you to stay where you are. That’s when I saw the update to your UI code on the quick edit subpage 4. Open: It is a fully open source and free UI Toolkit that developers worldwide can use for free and make various contributions to the Flutter code base itself, as well as to the Flutter ecosystem and documentation
Flutter is fundamentally different from other frames
Essential differences from other cross-platform solutions:
- Frameworks such as React Native simply invoke system components through JavaScript VIRTUAL machine extensions, and render components by Android and iOS systems.
- Flutter, on the other hand, rewrites a complete solution that includes both the underlying rendering logic and the upper development language. By closing the loop of component rendering itself, Flutter is able to render views consistently on Android and iOS with high performance (code execution efficiency and rendering performance are comparable to native apps).
Flutter development
According to stackOverflow’s 2019 global developer survey, Flutter is one of the top three favorite frameworks for developers. Flutter has been popular with developers since its launch
Many brands and companies around the world have started to use Flutter in their products or create SDKS for Flutter tailored to their products. There are also some big Chinese companies, especially Alibaba, which has launched several apps using Flutter
Picture: Big factory with Flutter already used
Flutter development status in The Chinese community
The Chinese community has contributed a large number of high quality technical articles and translated many official flutter documents, which can be found on the community website, flutter.cn. There are also many online and offline activities organized. Chinese developers are particularly involved in the global flutter community
Chinese developers’ contribution to Flutter Open Source project
Several Developers from Chinese companies have submitted code to the Flutter codeband and incorporated it into the Main Flutter SDK, especially the contributions of the Alibaba Xianyu team.
Flutter cross-platform
Flutter has proven to be a unique technology and development experience for mobile applications. Google hopes that Developers can bring these advantages, both in terms of development experience and performance, to a wide variety of other computing platforms and devices. To this end, Flutter has released a technology preview for Web. In particular, there are some active explorations in the field of desktop and desktop iot. The long-term vision of Flutter multi-platform ideally is that Flutter can be run on every device with a screen, and that Flutter can be used on every device with a screen to bring a very smooth user experience to the end user.
Mainstream cross-end solutions
Currently the more mainstream cross-end scheme
| QT | Electron | RN | Flutter | |
|---|---|---|---|---|
| Support platform | Ios, Android, Windows, Mac, Linux, Embedded | Windows, Mac, Linux | Ios, Android, (PC) | Fuchsia, ios, Android, Windows, Mac, Linux, Embedded, Web |
| performance | good | poor | poor | good |
| Ability to apply colours to a drawing | In the | good | good | In the |
| Development efficiency | In the | good | In the | good |
| ecological | In the | good | good | / |
| Dynamic update | poor | good | good | poor |
Flutter For Windows is currently in the technical preview stage and is expected to enter alpha this year. However, Flutter For Windows Release SDK has a compressed size of 7M, much smaller than QT and Electron. Rendering capability is the same as Flutter for Android and ios. Flutter is the SDK that builds Google’s Internet of Things operating system Fuchsia. It features cross-platform, high fidelity and high performance.
The main comparison between Flutter and RN: RN calls native interface rendering via JS. The main bottleneck is js and native calls. RN uses JS, so users can learn cheaply and easily. The platforms that Flutter supports include Fuchsia, ios, Android, Windows, Mac, Linux, Embedded and Web. This article focuses on Flutter for Web.
flutter for web
The technical preview of Flutter for Web can be run in a browser while running on a mobile phone. The same code base, the browser just recompiles Flutter for Web once. The rendering effect is very close. Hopefully the UI that has been implemented on the mobile end will be easy to use interactively on the Web.
Implementation principle of Flutter for Web
All the code for flutter for Web is in flutter_web, later added to the SDK of flutter’s master. To explain the principle, we need to go back to the mobile architecture diagram. The image rendering is implemented using the C++ flutter engine, which exposes the dart UI library to the superior architecture. So the mobile client code and framework code by the dart UI that interface to communicate with its engine, dart UI what to do, in fact the dart UI UI components look like the library don’t know, also don’t know how the layout, also don’t know how to draw cartoon, and I don’t know gestures, it only to do a very simple thing, This is to draw the image data that the parent frame gives it onto the screen
The design of Flutter for Web preserves the consistency of the upper framework and mobile terminals as much as possible to achieve the maximum reuse capability of code. In the engine layer, flutter Web Engine is implemented on the Web standard. This is an implementation of the DART UI library on the Web standard. What exactly does it do? In a nutshell, it is very similar to the implementation of the mobile DART UI library in that its job is to pass the upper frame to its image objects
Draw it to the browser as a Web standard API.
The Flutter for Web Engine gives preference to HTML and CSS for rendering images because they maximize the browser’s performance without pixelating when the page is scaled.
For some page elements that are difficult to draw with HTML and CSS, It will use Canvas 2D to draw. However, Canvas 2D has some disadvantages in performance and some pixelation problems, in which Google is also actively exploring. CSS Paint API may be used to replace Canvas in the future, but CSS Paint API is still a new standard, and browser support is not quite in place, so this is a direction to be explored in future research.
The Flutter Web Engine still relies on the Flutter framework to provide it with basic tasks such as layout and building UI components. It does not deal with these tasks directly.
What scenarios can Flutter for Web be used in
The current thinking mainly focuses on two scenarios:
-
The first scenario is to develop a web side companion application for mobile applications:
- Many products are mobile client priority when first came out red, will start a mobile app, but on the mobile application will still have many limitations, such as the screen may be is not big enough to look at the pictures or when watching video is not comfortable, or the user may often enter text, such as chat software, keyboard on a mobile device is not very convenient, This time a lot of vendors will do a desktop client or the browser application, a let the user to be able to more convenient to view information or use the desktop keyboard and mouse to do the work of an information entry, examples of this area is very much, such as everyone is using WeChat, is a first mobile end products, We also hope that Flutter for Web can first serve the developers who have already developed Flutter for mobile, enabling them to quickly implement a companion application for Web. To meet the needs of users for input and output devices in some specific scenarios.
-
The second application scenario focuses on the reuse of highly interactive UI elements already implemented with Flutter, such as interactive data charts. These charts take a lot of work to implement one at a time and have a lot of details to coordinate. Can we easily transfer the same components to the Web side after we have done this code? If we develop them again on the Web side, they may be different from the previous design draft. Here, flutter for Web helps developers who have already implemented some highly interactive elements on the mobile side. Maximum reuse has been invested in the mobile end, in the web side also achieve with the design draft reach as high as consistent interaction experience, similar elements, and embedded small game, and large application in some of the tools, such as calendar, auto configuration, portfolio analysis tools such as the classes are highly interactive, Many times this development cost can be increased by code sharing.
Flutter for Web performance
According to the current data, the performance of flutter for Web sample application on Github has been tested. The sample application can reach 60FPS on the desktop browser without major problems. There are no major problems on the mobile browser if it is a relatively new mobile phone in the last two years. It’s still being optimized
A comparison of two schemes of Flutter cross-platform and Flutter for Web
Group internal and external cross-platform program status
Figure fromFlutter For Windows& Web
Flutter component rendering principle
The basic principle of computer image display: the image display in the computer is completed by 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 CPU gives the calculated content to be displayed to the GPU, and the GPU completes the rendering and puts it into the frame buffer. Then the video controller reads the frame data from the frame buffer and submits it to the display to complete the image display at the speed of 60 times per second according to the VSync signal.
The operating system follows this mechanism for rendering images, and Flutter uses this underlying scheme:
Calculate synthesized view data between two hardware clock signals as fast as possible, and then pass it to GPU 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.
The diagram shows the principle of flutter drawing
The underlying rendering capabilities are unified without worrying about platform-specific rendering features, ensuring that the same set of code calls will render exactly the same on Android and iOS platforms.
Why does Flutter choose Dart instead of Javascript?
Why did Flutter choose Dart instead of JavaScript, the quasi-official language of the front-end application? The reason given by Google is simple and straightforward: The Dart language development team is right next door. Some of the language features needed for Flutter can be quickly implemented at the grammatical level. If you choose JavaScript, you have to go through lengthy decisions by various committees and browser providers. Dart supports both just-in-time JIT and pre-compilation AOT, dynamic solutions, underlying engine modifications, and Ali maintains an engine of its own. Dart is a collection of languages and so on.
How does the DART language work in a browser?
The dart application and framework are written in DART. How does dart code run in the browser? Here, we use a compiler called Dart 2JS Compiler, which compiles Dart code into javascript. And then let the application framework code and your code to run in the browser, there may be 78 dart2js this tool has been around for years, in the Google actually has very widespread application, the whole system of Google’s advertising business is build on the dart language, and through the compiler implementation dart2js browser side operation ability, It is a very efficient, mature, and stable compilation tool.
The engineering structure of flutter
Start with the project directory structure of Flutter
The above Flutter project is actually a parent project that incorporates both Android and IOS original projects. Although Flutter is a cross-platform development solution, it requires a container to eventually run on Android and IOS.
The state management solution jointly built with the community – Provider
State of state management, for example, the relationship between the state and the UI, if everyone has written any reactive programming model framework, to the familiar, is your UI changes is driven by your state, your code doesn’t go directly to change the UI to display what inside, the UI framework for simplicity is a very big help, The state here is the state management inside the problem, state management to solve the state how to structure, to put in the application code base where, what should its read and write operation, so also produced a lot of multifous state management scheme
On the official website, there is a summary of the more mainstream state management methods proposed by community developers, and there are nearly ten mainstream ones. Developers should do demand analysis according to the actual needs of their own projects, and then understand the advantages and disadvantages of each state management method to make a final choice. But a lot of time to just start with the developers may not have time to think for concrete, or to see so many choices, produces a difficult choice, is likely to be inadvertently, was killed on the wheel, chose one of the most complicated state management methods, so after receiving a lot of, want to be able to give an official recommendation user feedback, to apply to most of the scenarios, So Google officially recommended a simple state management method at IO 2019: Package: Provider
Provider has an interesting background. In fact, it was developed by remi, a community developer. Before the provider package came out, the Google team had already started to make a similar state management scheme called Provide. After careful comparison, Google found that the provider package solves a similar problem, but its solution is easier to use and more reasonable than provide in many aspects of design. Finally, Google abandoned the nearly completed provide package state management solution and cooperated with the community developer. The co-promotion and improvement of the Provider package is a symbolic event for the community’s growth and represents the ability of flutter contributors to solve their own problems.
The developer experience is continuously optimized
grammar
New was a mandatory keyword in 1.0 and a writable keyword in 2.0
Editor UI Guides
– added some extra lines to the editor to indicate the level of UI components and make the UI readable, which is enabled by default on androidstudio. This is a huge efficiency boost, and many developers can’t go back to the previous code once they have used it for a while.
Flutter and Dart are continuously optimized
- Improved the mechanism and development experience of Flutter and native add-to-app: The mix of Flutter and native has been productized
- A lot of companies have existing engineering, are also very want to try the flutter, but the existing project over here, is an impossible task, so I need a better way, to have an existing project team, step by step try to flutter, in some page migration first, and then according to the actual effect to further renovation for existing projects.
- The Dart language itself is also evolving in a very positive way
- Easier to understand error messages: Future error messages will make it easier for developers to backtrack
- Improve basic desktop interaction modes