If you’re a front-end developer, the term “cross-platform” is familiar. Common front-end frameworks such as React, Vue and Angular can be used on the web as well as mobile, but rarely across PCS and Macs, known as Windows, Linux and macOS applications. Even if it does, it will be slightly fatigued when there is a lot of scientific computing demand, due to JS performance bottlenecks. Is there an ideal UI framework that kills them all? The answer is — Flutter.

Performance advantages of Flutter

As a universal cross-platform UI framework, Flutter’s performance is remarkable. Take Android for example. When drawing, an Android native APP should first call Java code of Android framework, then call SKIA (C/C++) drawing engine code, and finally generate CPU or GPU instructions to complete drawing on the device. When drawing, the Flutter APP calls the Dart code of the Flutter framework and then directly calls the SKIA (C/C++) code. So long as the efficiency of the Flutter framework Dart code is comparable to that of the native Framework Java code, the performance of Flutter can be comparable to that of the native APP. React Native, for example, first calls the JavaScript code of the framework itself, then calls the Java code of the Android framework, and then calls SKia. This is one more step than the Native App running process, so its performance is definitely not as good as that of the Native App. The domestic well-known “Idle Fish” technical team explained that Flutter’s performance was close to that of the native App as follows:

1. Pre-compiled (AOT), execute Native(ARM) code directly at runtime; 2. The necessary communication (channel) with Native is C++ level, with good performance; 3. Dart code execution (UI TaskRunner), image download (IO TaskRunner), real rendering (GPU TaskRunner), The communication to the Platform TaskRunner (the main thread in the Native concept) is isolated from each other. By putting time-consuming logic into IO TaskRunner or new Isolate(which will be executed in the Dart thread pool); GPU TaskRunner can submit frame data to GPU while UI TaskRunner is already preparing the next frame data. This pipeline mechanism improves rendering speed; 4. Optimization of Flutter level for layout, etc. : calculation of layout can be completed with a single tree walk; Relayout Boundary mechanism: If the size of the Child is fixed, the Relayout of the Child will not lead to the Parent Relayout; Repaint Boundry: If a subtree of a tree is redrawn at different rates than the rest of the tree, RenderRepaintBoundary can improve performance. 5. Optimization of Flutter by Skia team. 6. The layout optimization of the framework is transparent to the upper level development.

This should be easy to understand if you have any front-end development experience, especially mobile, or have delved deeply into Flutter. There are now a lot of tutorials on how to use Flutter to develop mobile apps. Here’s how to use Flutter for PC and Mac development, and how to completely cross front-end platforms with Flutter.

The PC end of actual combat

1. Preparation

First we need to ensure that the Flutter development environment is ready. For steps to set up a development environment, see: flutter.cn/docs/get-st… Without further elaboration, we will focus on the following actions: As of today, the Flutter SDK on the Stable branch can be set to enable PC side development, but is not actually available. Therefore, we need to switch it to the master branch. To switch, execute the following statement in the command line window:

flutter channel master 
Copy the code

Maybe you can directly switch to Git, but I didn’t try, interested friends can try by themselves. When a message is displayed indicating that the switchover succeeds, execute it

flutter upgrade
Copy the code

Upgrade to the latest SDK version (including Dart). In addition, if you are using Windows, you will need to install Visual Studio development software and install the Workload of Desktop development with C++. For macOS, there is no need to install Visual Studio.

2. Enable PC development support

Execute at the command line

flutter config --enable-windows-desktop
Copy the code

Wait a few seconds to finish. The console will output the following:

Setting “enable-windows-desktop” value to “true”. You may need to restart any open editors for them to read new settings.

If yes, run the

flutter devices
Copy the code

Lists the debugging devices that are connected, and the first execution may take some time to download the necessary development kits. You can then see output similar to the following:

1 connected device: Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.900]

Other operating system environments are similar. In addition, we can execute at any time

flutter config
Copy the code

View the current configuration. You can also revert to the default Settings at any time.

Settings: enable-windows-desktop: true

3. Create projects

This step is needless to say, in the appropriate directory to perform

Flutter CREATE [project name]Copy the code

Can.

4. Migrate projects

For projects that have not been enabled on the PC or need to be migrated to the PC or Mac, run the projects in the project root directory

flutter create .
Copy the code

(Note the last point)

5. Run the program

Needless to say, go to the project root directory and execute

flutter run
Copy the code

You can see the results.

Ok, now it’s time to implement the specific business. I hope you have gained and I wish you all the best!