Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Create Flutter project

We’ve been matchedAndroid StudiotheFlutterEnvironment, so what we’re going to do is useAndroid StudioTo create the project:Open theAndroid StudioAnd then clickNew Flutter Project:The selectedFlutterTo ensure thatFlutter SDK pathThe following path is correct, then clicknext:

  • Project name: Project name; It’s important to note that,FlutterThe project name cannot be usedHump namedFormat,FlutterIt is recommended to useAn underscore (_)To link;
  • Project location: Project storage directory; Note that if you enter the project name before modifying the directory, the path of the level-1 project name will be added to the directory. If you enter the name after changing the directory, the path of the level-1 project name will be lost. You need to manually complete the path.
  • Description: Engineering description;
  • Project type:FlutterProject type; Divided intoApplication.Plugin.PackageandModuleFour;
    • Application:FlutterEngineering;
    • Plugin:FlutterPlug-in, which containsDartCode and native code for each platform;
    • Package:FlutterFramework packages, such as third-party frameworks, contain onlyDartCode;
    • Module: it is toFlutterFor mixed development, such as with native development;
  • OrganizationOrganization, similar toXcodecreateiOSEngineering, fill inBundle IDThe function;
  • Android language:AndroidNative engineering development language;JavaorKotlin;
  • iOS language:iOSNative engineering development language;Objective-CorSwift;
  • Platforms: Optional support platform;Android.iOS.Linux.MacOS.WeborWindows;

​

You can use More Settings without modifying them.

Click on theFinishCreate project:

The first time you create a project, you pull data from the network, which takes a little time;

Select different options here, directory display status will be different, we generally chooseProjectOptions, directory as follows:

At this time, the file directory is the same as the project directory in the folder;

  • android:AndroidProject catalog;
  • ios:iOSProject catalog;
  • lib: We storeDartDirectory of code;

inAndroid StudioThe console we can see while using isAndroid StudiorunningFlutterProject, but because our equipment isiPhoneSo eventually we have toXcodeTo implement thecompileandThe installation:Operation effect, the interface is as follows:So far, we have putFlutterThe sample project ran successfully;

A bug with Flutter in Android Studio

If a Flutter project is running in Android Studio and we use the comman+Q shortcut to forcibly retreat, there is a probability that the Flutter will lock up. At this point, we will have a problem opening the project again and running; This is because Android Studio has a caching mechanism to protect data; The solution is to delete cached files; The cache files are stored in the Flutter SDK directory:

flutter/bin/cache/

There is a file in this directorylockfile, can be deleted;

The advantage of Flutter

Our previous use of ReactNative was based on the native UI encapsulation, which required JavaScript code to call RN framework, and then render through native controls; The problem is that if the UI layer is updated, RN will need to be updated immediately to be compatible, and it is very dependent on native. Flutter is not packaged in a native UI. Instead, Flutter has a dedicated rendering engine installed on the phone, so when Flutter is introduced, the package size increases. The engine parses the Dart code and renders the interface; Does not rely on native UI and is efficient; Because it is based on the same set of rendering engine, the rendering effect of Android and iOS platforms is highly uniform.

About Hot Updates

Because Apple has banned the use of hot updates in the App, Flutter declares that it does not support hot updates. However, we notice that hot overloading exists in the Debug version and not in the Release version; Based on the hot overload function, developers can customize the hot update function; This requires modification of the rendering engine, which is complex and technically difficult;