1. Introduction
1.1, Hybrid framework comparison
ReactNaive, Flutter, and Uniapp are the current mainstream hybrid frameworks, and the approaches to native methods are also different:
ReactNative will convert components to native components to achieve native experience and speed
Flutter has its own engine to support the operation of components, similar to the Unity game engine, this experience speed can also reach the native experience
Uniapp is actually not a real hybrid, it still relies on JS, after all, it is still web, so the experience may not achieve the effect of the first two
1.2, Reasons for choosing Flutter
With the background of Google bosses, a strong technical team can support the stable development of Flutter. Compared with the ReactNative version, which changes greatly and the update content changes quickly, the basic components of Flutter will not change greatly, which is more stable in terms of version compatibility.
The experience is smoother, there is basically no lag, the cpu is occupied, the memory is less than other hybrid frameworks, and the overall performance is better
The development is simpler and faster, using the dart language, although it is a new language, but the syntax is more concise, similar to python, js, kotlin and other languages
Second environment construction
2.1 Android environment, AndroidStudio+JDK+SDK, this is relatively basic, you can find the configuration by yourself
2.2 Flutter relies on the Git command line tool, you need to download and install git first: https://git-scm.com/download/win
2.3 FlutterSDK download: https://docs.flutter.dev/release/archive
After decompression, put it in any directory
2.3 Run AndroidStudio, and install flutter plugin, Dart, Flutter
Create a new flutter project
If there is no new flutter option, it may be that the App Links Assistant plug-in option is turned off, just turn it on for him
Create a project and debug
Click on the run icon
You can see that Gradle starts to compile and install the project
The Flutter welcome page will appear when the operation is successful.
2.4 Flutter supports hot loading, modifying the content of dart components will be displayed on the real device immediately
How about we change the following sentence
Feel free to change it to something else
As you can see, the page will change immediately
Third, the command to run
3.1 Configure flutter environment variables
D:\FlutterSdk\bin
D:\FlutterSdk\bin\cache\dart-sdk\bin
3.2 Detect the flutter operating environment conditions, open the command tool and enter the command
flutter doctor
The cross mark is not satisfied
The first question, cmdline-tools component is missing
Open AndroidStudio and click SDK Management
Select SDK Tools -> Command-line tootls installation
You can see that cmdline-tools is being downloaded
Run the inspection command flutter doctor again and see that the error is gone
The second question, Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses.
meaning is
Android Toolchain - Developing for Android Devices (Android SDK Version 30.0.3) ✗ Android License Status Unknown. Run flutter doctor --android-licenses to accept the SDK license
Execute the flutter doctor --android-licenses command according to the prompt, and select y for all
Run the inspection instruction flutter doctor again , and see that the second error is gone
The third question Unable to find bundled Java version. Cannot find the java version
reason:
Since the default jre directory is the jre in the AndroidStudio directory , there is no JDK in it by default, so you need to copy the JDK file to the jre in AndroidStudio
Find the jre file of AndroidStudio
Paste it into jre
Run the inspection command flutter doctor again , and see that no error has been reported
3.3 Command debugging
discover device command
flutter devices
start the application
flutter run
An error was reported, meaning that Gradle needs JDK11 version, but now it is JDK1.8 version
The JDK1.8 file that was indeed copied in the step of configuring jre above, then operate again, download JDK11, and copy the JDK file to the "jre" file of AndroidStudio
Run flutter run again, you can see that this run was successful
3.4 Create a project by command
flutter create flutter_app
You can see that after the creation is successful, a new project will be generated in the folder opened by the command
Enter the root directory of the command
cd flutter_app
Run the project flutter run, you can see that the command runs successfully
3.5 Configuration before project operation
Direct operation may be slow due to the problem of remote dependency mirroring, we can change the domestic Alibaba Cloud mirroring
to modify two places
- android/build.gradle in the Flutter project
- The flutter.gradle file in the FlutterSDK
change into
//google()
//mavenCentral()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
android/build.gradle in the Flutter project
The flutter.gradle file in the FlutterSDK
3.6 Of course, you can also specify the Gradle version. Due to foreign network restrictions and the large Gradle build tool, downloading is very time-consuming. Directly specifying the local cache version will be faster
The first step is to check the locally cached gradle version and find the cache location in .gradle, which contains the cached version
The second step is to modify the gradle release version in the Flutter project D:\FlutterProject\flutter_app\android\gradle\wrapper\gradle-wrapper.properties
Change to the version in the cache, this is gradle-6.5-bin
The third step is to modify the gradle plugin version in the Flutter project
I changed this to 4.1.2, note that the gradle release version and the plug-in version should correspond
Four VSCode to run the Flutter project
4.1 AndroidStudio is more used to run android projects, flutter components are dart language, it is more suitable to use VSCode editor to develop and write
4.2 VSCode download official website: https://code.visualstudio.com/
Just download and install
4.3 Open the Flutter project
Flutter-related plug-ins can be optionally installed, and the Dart plug-in must be installed to run
4.4 Debugging, click Run => Start Debugging
You can see that the browser runs successfully
The Android real machine debugging is selected above, and it also runs successfully
So far, the environment configuration of Flutter, AndroidStudio, VSCode environment configuration is over