Flutter learning record-build a development environment

Then the last chapter start to continue.


Today this chapter learns to build a Flutter development environment. Because I used to work on Android, I did it according to my habits. Friends who are engaged in iOS development can learn from it.

1. Download the Flutter SDK

Open the Flutter SDK official website and select the corresponding platform and version to download. The
Insert picture description here
downloaded compressed package is the SDK. Decompress the compressed package to the directory where you want to install the Flutter SDK (do not put it in a directory with higher permissions, such as: C: Program Files \).

2. Configure environment variables

If you want to run the flutter command on the command line that comes with the Windows platform, you must configure the environment variables in the same way as the java or Android environment variables.
Add a new variable named FLUTTER_HOME to the system variables, the value is the unzipped sdk directory, this is mine:
Insert picture description here
Then add the variable we just added to the Path variable of the system:
Insert picture description here
At this point, the environment variables are configured Need to check whether flutter is ready.

3. Check

To check whether the Flutter SDK is installed successfully and is used normally, you need to use the command line input: flutter doctor. To check whether it can be used normally. (If the environment variables of the previous step are not configured, the command line of this step will fail to run.) The first time the system will check whether the environment required for normal operation of flutter is normal, it will be a bit slow.
Insert picture description here
This is the result of my successful operation. If an error occurs, an X will be displayed in front of each line and an error message will be given.
Look at the information corresponding to each line.
The first line: some information of flutter sdk, the version number is: v1.2.1.
The second line: some information of Android SDK, the version number is: 29.0.3.
The third line: some information of Android Studio, the version number is: 3.6.
The fourth line: the information of the device connected to the computer. I have no connected device, so there is no device.
If the flutter doctor fails to run, you can solve it according to the error information given. It is nothing more than the lack of Android sd version, Android Studio did not install errors, and so on, are all well-solved problems.

4. Create a default Flutter application

Open the Android studio
Insert picture description here
red box. The first line is to create a normal Android Studio degree, the second line is to create a Flutter program, of course, we click on the second line to pull. Click to enter the following picture. The
Insert picture description here
four options in a row from left to right are: create a Flutter program, create a Flutter plugin, create a Flutter package, and create a FlutterModule. We select the first one and click next to enter the following figure. The
Insert picture description here
first line Project name is the name of the program we want to create. This can be modified at will (not in Chinese).
The second line of Flutter SDK path is the path of our uncompressed Flutter SDK.
The third line Project location is the storage path of the program to be created.
The fourth line Description is the description of the program to be created, this can be modified at will.
Click next to enter the following picture.
Insert picture description here
This step is mainly to give the program a package name. The naming rules of the package name are clear to everyone, and it is not clear to Baidu.
include kotlin support for android code. This sentence refers to including support for Android code kotlin.
include swift support for ios code. This sentence refers to including support for iOS code swift.
Generally, we will check and click finish to complete the project.
After the creation is completed, a demo of the counting example will be given by default. For details of this demo, you can move to the book to view the detailed code explanation. This is a detailed explanation of the counter demo code. After
reading the code of the counter example, you will have a basic understanding of the program. Next time you will learn routing, package, and resource management.

Published 6 original articles · received 1 · views 441

Guess you like

Origin blog.csdn.net/qq_35809004/article/details/105572295