What is Flutter?
- Flutter is Google's mobile cross-platform UI framework, which can quickly build high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Around the world, Flutter is being used by more and more developers and organizations, and Flutter is completely free and open source. To put it simply, Flutter is a mobile application SDK, including frameworks, controls and some tools. You can use a set of code to build Android and iOS applications at the same time, and the performance can reach the same performance as a native application.
Mobile cross-platform framework
In traditional native development, two development teams of Android and iOS are generally maintained. When the version is iterated, both the labor cost and the test cost will increase. This may not be deep for our ordinary android programmers, or we don't care about this. But from the perspective of the company, if I can have a set of codes, I can directly develop android apk and ios ipa, does it mean that I only need to have a team that develops and maintains this set of codes? In terms of labor costs, it can make me pay less. From the perspective of development, a set of code can also be used to complete reuse, testing, and UI style unity.
As early as 2008, a framework called "PhoneGap" won an award and began to support the Android platform. Now we are talking about PhoneGap generally referring to "Cordova". It is an open source project contributed by PhoneGap to Apache. It is a core code extracted from PhoneGap and is the core engine that drives PhoneGap. The two maintain a common source code component, only the name and the package name are different. PhoneGap is a technology that uses HTML, CSS and JavaScript to complete cross-platform development. At the time, PhoneGap claimed to be close to native performance. However, its working principle is based on WebView, and then uses JavaInterface to complete the interaction with native code. We call this tool WebView JavaScript Bridge (JsBridge).
This method can well solve the needs of cross-platform and dynamic update. However, we all know that the rendering efficiency of android WebView is very poor. At the same time, JavaScript is an interpreted language. It does not need to be compiled and interpreted and executed at runtime, which leads to The execution performance of JavaScript is too low. At the same time, because of Android's own problems, the memory consumed in the process of using WebView cannot be recycled in time when it is not needed. This will cause our available memory to become less and less, and ultimately OOM. Therefore, the emergence of frameworks like Flutter is inevitable. Existing cross-platform frameworks, such as RN, are based on JS. Due to the execution performance of JS, cross-platform application performance has been unable to break through the bottleneck. Flutter uses JIT compilation in Debug and supports hot reloading, which can improve our development efficiency, while in Release, using AOT to directly compile machine code can achieve better performance. From a design perspective, Flutter provides a very rich Widget component, which allows us to easily achieve Android or IOS style UI effects.
Flutter advantage
Hot reloading
every time the page is changed, it does not need to be refreshed manually, it can be refreshed automatically. That is to support hot reloading during the development process.
Unified UI
Flutter provides a wealth of built-in UI components-Material Design (for Android) and Cupertino (for iOS), so you don't need to worry about how it looks different on many devices.
Flutter architecture
Flutter's architecture is mainly divided into three layers: Framework, Engine and Embedder.
1. Framework is implemented using dart, including Material Design style Widget, Cupertino (for iOS) style Widgets, text/picture/button and other basic Widgets, rendering, animation, gestures, etc. The core code of this part is: flutter package under the flutter warehouse, and packages such as io, async, ui under the sky_engine warehouse (the dart:ui library provides the interface between the Flutter framework and the engine).
2. Engine is implemented in C++, mainly including Skia, Dart and Text. Skia is an open source two-dimensional graphics library, C++ 2D graphics engine, calls GPU to complete rendering, provides a common API suitable for a variety of software and hardware platforms.
3. Embedder is an embedding layer that embeds Flutter on various platforms. The main work done here includes rendering Surface settings, thread settings, and plug-ins. It can be seen from this that the platform-related layer of Flutter is very low, the platform (such as iOS) only provides a canvas, and all the remaining rendering-related logic is inside Flutter, which makes it have good cross-end consistency.
Dart language introduction
Flutter uses Dart as its development framework and widget language. If you have programming experience, especially understanding Java or Javascript, then you will find that Dart is very easy to learn. Flutter Chinese website has compiled a list of Dart language resources that can help you learn Dart quickly . I hope it will be useful to you.
Flutter uses the dart language and adopts the JIT mode in the development phase, which avoids compiling every change and greatly saves development time; the
AOT-based release package lutter can generate efficient ARM code through AOT when released. Ensure application performance.
For a fast and smooth user experience, it is necessary to be able to run a large amount of code in each animation frame without periodic pauses, otherwise it will cause frame drop.
Single thread:
No locks are required, there is no data competition and variable state synchronization, and there is no performance loss of thread context switching and stalls caused by locks.
Garbage Collection
Multi-generation lock-free garbage collector, specifically optimized for the creation and destruction of a large number of Widgets objects commonly found in UI frameworks.
- The advantage of Flutter and RN is that
RN is passed to native through JavaScript through the bridge to complete the native drawing. The cost of the bridge is high because it requires frequent cross-bridge calls, causing performance problems such as stuttering.
Flutter uses DVM (dart virtual machine) to reduce the interaction of the bridge, and directly executes these compiled native codes during runtime, just like our native development, and Bridge is no longer needed to act as an intermediary.
What is the difference between Flutter and dynamic frameworks like React-Native and Weex?
The core of React-Native and Weex is developed through Javascript, and a Javascript interpreter is required for execution, and the UI is rendered through native controls. Flutter is different from most other frameworks used to build mobile applications because Flutter neither uses WebView nor the native controls of the operating system. Instead, Flutter uses its own high-performance rendering engine to draw widgets. Flutter is built using C, C++, Dart, and Skia (2D rendering engine). On IOS, the C/C++ code of the Flutter engine is compiled using LLVM, any Dart code is compiled into native code by AOT, and the Flutter application runs using the native instruction set (no interpreter involved). Under Android, the C/C++ code of the Flutter engine is compiled with Android's NDK. Any Dart code is compiled into local code by AOT. Flutter applications still run using the native instruction set (no interpreter involved) . Therefore, Flutter can achieve the same performance as native apps.
At the same time, Flutter provides a set of its own widgets, which are managed and rendered by Flutter's framework and engine. You can browse the catalog of Flutter widgets. The reason why native controls are not applicable is that Flutter hopes that the final result will be higher quality. If Flutter uses native system widgets, the quality and performance of Flutter applications will be limited by the quality of these widgets. For example, in Android, there is a set of hard-coded gestures and fixed rules to disambiguate gesture conflicts. In Flutter, you can write your own gesture recognizer, which is a first-level participant in the gesture system. In addition, two small tools written by different people can coordinate gesture conflicts and disambiguation.
Does Flutter support "hot reload" like webpack or Android "instant run"?
Yes, Flutter supports Hot Reload, which works by injecting updated source code files into the running Dart VM (virtual machine). This includes not only adding new classes, but also adding methods and fields to existing classes, and changing existing functions. For details, see Flutter Hot Reload.
For programmers/developers, what kind of experience is necessary to use Flutter?
Flutter is easy to get started for programmers familiar with object-oriented concepts (classes, methods, variables, etc.) and imperative programming concepts (loops, conditions, etc.). Learn and use Flutter without prior mobile development experience. We have seen some people with little programming experience learn and use Flutter for prototyping and application development.
Flutter's future prospects
More and more manufacturers use flutter for development. For example, Ali, JD Finance, Tencent, and Flutter have a bright future.
Application example:
- An open source Flutter application example.
Develop an APP to implement basic functions, including login, news list, dynamic list, comment list support pull-down refresh or page loading, etc.
ios screenshot
Android screenshot