preface

While browsing the technology website, I see a lot of references to Flutter, which claims to make mobile apps more fluid. Interest value full marks, so began to learn. Flutter 官网 Flutter Chinese documentation

introduce

  • Flutter was built by Google’s team of engineers as a framework for creating high-performance, cross-platform mobile applications
  • Flutter focuses on low latency input and high frame rates for Android and iOS
  • The design of Flutter is similar to that of React-Native, but a little more straightforward than RN
  • Flutter is developed in Dart

Historical evolution

Since I got involved in mobile APP development, Hybrid development relies on WebView. As we all know, the biggest problem of WebView is performance, and the interactive experience is not good. RN eliminates WebView and uses JavaScriptCore to bridge JS calls into native calls. The performance problem was solved, which was a big step forward. But if you think about it, you still need an intermediate amount to do it. This is equivalent to multiple intermediate links, including supplier -> seller -> seller, which will affect the performance of flutter more thoroughly, without bridge and webview. Directly by generating a UI library for native use, which is why Dart is used.

Compared with the RN

  • It’s all cross-platform
  • Local changes are controlled by state machines
  • Support for hot updates

Installation environment

First of all,

git clone -b beta https://github.com/flutter/flutter.git
Copy the code

Then set the environment variables

Vi ~/.bash_profile export PUB_HOSTED_URL=https://pub.flutter-io.cn // Set export for domestic users FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // Domestic users need to set export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
Copy the code

PATH_TO_FLUTTER_GIT_DIRECTORY clone your flutter file directory and run source $HOME/.bash_profile to refresh

Run the ide

I’m using vscode and when I open up vscode, let’s install the plug-inAnd then the shortcut iscommand+shift+P(Or View ->Command Palette)The installation is successful if the following figure is run:

If the installation is not successful, you can go to the official documentation. However, there will be an error message, and you can handle it and finally debug VScode

Creating an application

The last

You can see that the image is pink and blue by default. Try the hot load function and save it.