Work needs, because some clients use the flutter of pages to write, you need to look at flutter QA knowledge, therefore, did flutter research, installation included, the basics of writing and demo, the second part is the installation and configuration environment.
——
Flutter is Google launched and open source mobile application development framework, a series of cross-platform, high-fidelity, high-performance
For a more comprehensive understanding of Flutter, first of all we need to know what is a cross-platform framework
First, cross-platform technology and other cross-platform framework
Native application: refers to a particular mobile platform (such as iOS or Android) specific applications, using the appropriate platform to support the development tools and languages, and directly call the SDK API provided by the system.
Advantages : can access the full functionality of the platform , such as GPS, camera; high performance, complex animations can achieve a good user experience.
Drawback : dynamic updates difficult , need to upgrade version send updates (or hotfix); Because the dual platform, development and testing large costs.
Native Development for these two shortcomings, the birth of a number of dynamic cross-platform framework
At present, there are three types
- Native H5 + (mixed development framework: Cordova, Ionic, micro-channel applet)
- JavaScript development + native rendering (React Native, Weex, fast application)
- Self-绘 UI + Primeval (QT for mobile, Flutter)
1, H5 + primeval
Also known as hybrid development, these are common in the major app, of course, we have also used the app
The main principle: in the APP in part by H5 achieved by page load controls native to load WebView , dynamic updated by h5
H5 code that is running in WebView, whereas WebView is essentially a browser kernel, like in a sandbox with limited privileges, so the ability for most systems do not have access,
Usually pre-mixed framework to achieve some ability to access the system API in native code, and then exposed to WebView for JavaScript call.
The disadvantage is the poor performance will be difficult, complex user interface or animation to achieve
2, JavaScript native rendering development +
React Native (referred to as RN) is Facebook in April 2015 open source cross-platform mobile application development framework, using the Javascript language RN
RN and React principle the same, and Flutter also inspired by React, communicating ideas
React Native native control rendering, so performance will be H5 much better than mixing applications, but is limited by js scripting language, the efficiency needs to be improved, and rendering relies on native controls, also depends on a system update, will be affected by the native UI system limit
3, self-绘 UI + primeval
Flutter belong to this type of cross-platform framework, drawn by the UI rendering engine to achieve a unified interface to different platforms, without relying on the native control system, it is possible to achieve the consistency of different platforms UI.
Self-painted engine to solve the problem of cross-platform UI, and if it involves the ability to call other systems, still have to involve Native Development
(If you want the scene when the transfer of the rights of native applications we tested, you can pay attention to the next)
The advantage of high performance, flexible and easy to maintain; the disadvantage is unable to dynamic updates, or to upgrade update
In summary:
| Technology Type | UI rendering | performance | Development efficiency | Dynamic | On behalf of the frame |
|---|---|---|---|---|---|
| H5 + primeval | WebView rendering | general | high | stand by | Cordova、Ionic |
| Native rendering JavaScript + | Native rendering controls | it is good | in | stand by | RN、Weex |
| Self-绘 UI + primeval | Calls the system API rendering | it is good | High Flutter, low QT | Not supported by default | QT、Flutter |
Two, Flutter
A summary of the advantages of a Flutter
- A dual-platform code for operating cost savings
- Thermal overload functions to improve development efficiency (follow-up will show the specific thermal overload by demo)
- Using built-in rendering engine, rendering, high performance
FIG frame Flutter
(Only one core lightweight C / C ++ code for the Dart .Flutter implemented in most other systems (in combination, gestures, animations, frames, widget, etc.), a developer can easily be read, alterations, substitutions or frameshift except)
Some basics Flutter
1, Flutter use development languages: Dart
Dart is an object-oriented language, garbage collection, drawing on Java and JavaScript, and Java static grammar is very similar, such as the type definition, function declarations, such as generics, and the dynamic characteristics much like another, and JavaScript, such as function style characteristics, asynchronous support.
(Specific elaborate expansion in Dart language)
2, thermal overloads (demo demo)
-
After running the code changes, do not press the "stop" button; and let the application continue to run;
-
Call Save (cmd-s / ctrl-s), or click the reload button hot (the button with the lightning ⚡️ icon), then check the device has changed instantly to the new code
3, everything is widget
On Android and iOS, the corresponding member is a variety of View class.
Flutter concept using different elements, not only the structure of the member. Flutter component architecture uses a combination of more, rather than inherited, so the more powerful and flexible component architecture. Flutter official documentation wrote:
In Flutter, the behavior is part (such as GestureDetector). InheritedWidget can be used for state management, AnimatedWidget be used to build the animation.
Three, Dart single-threaded model
In Java, an exception occurs and if the program is not caught, then the program will terminate, but this is not at Dart JavaScript, or;
Java is a programming language, multi-threading model of any one thread trigger an exception and the exception is not caught, it will cause the whole process to exit. But Dart and JavaScript are not, they are single-threaded model.
In Dart, all of the external events in the event queue tasks, such as IO, timers, click, and draw events, while the micro-tasks are usually derived from internal Dart, and micro-tasks very little, the reason for this is because micro high priority task queue, if the micro-task too much, the longer the sum of the execution time, the event queue task of the more long delays, for the most intuitive GUI applications is a comparison of the performance of the card, it must have to ensure that the micro-task queue will not be too long. It is noteworthy that, we can Future.microtask(…)queue a task to insert micro-task method.
In the event loop, when a task exception occurs and is not caught, the program does not quit, and the result is a direct result of the current follow-up mission of the code will not be executed, and that is a task exception is It will not affect the execution of other tasks.
Four, State lifecycle
State will in turn perform the initialization: Constructors> initState> didChangeDependencies> Widget build, this time the page loads