• A, description,
  • 2. Build the Flutter development environment on Windows
    • 1. System configuration requirements
    • Get the Flutter SDK
    • 3. Add environment variables
    • 4. Run flutter Doctor
    • 5. Editor Settings
      • (1) VS Code configuration
      • (2) Android Studio configuration
  • Third, summary

A, description,

In my previous article, “The Evolution of Flutter (I) — Why Flutter is the Ultimate Cross-platform Development”, I introduced the advantages and principles of Flutter development. Now that we want to learn about Flutter, our next step is to build the Flutter development environment. Since my computer runs Windows, the following tutorials are also Windows based. Readers of Flutter on macOS, Linux, or Chorme OS can refer to this article or visit the Flutter Noon community to see how to install and setup the Flutter environment.

Flutter. Cn/docs/get – st…

2. Build the Flutter development environment on Windows

1. System configuration requirements

To build a successful Flutter development environment, your computer must meet at least the following requirements:

  • Operating system: Windows 7 SP1 or later (64-bit operating system based on x86-64).

  • Disk space: You should have at least 1.32GB of space in addition to installing the IDE and some tools.

  • Necessary Tools: For Flutter to work properly on your computer, the following two tools must be installed:

    • Windows PowerShell 5.0 or later (pre-installed in Windows 10)

    • Git for Windows 2.x, and check the use Git option from the Windows command prompt. Make sure you can execute git commands (add to environment variables) directly from the command prompt or PowerShell.

If your computer does not have these two tools, please install, install the tutorial I will not repeat, do not know the reader please search online.

Get the Flutter SDK

Readers can download the Flutter SDK from the Flutter website:

Flutter. Dev/docs/develo…

I used the latest stable version 1.22.6 (2021/02/21). To download this version, just click on the link below:

Storage. The flutter – IO. Cn/flutter_inf…

To upgrade the Flutter SDK in the future, simply run the following command:

flutter upgrade
Copy the code

Flutter has four distribution channels: Stable, Beta, Dev, and Master. It is recommended to use stable channels for downloads.

To see which channel you are currently using, use the following command:

flutter channel
Copy the code

To switch to another channel (such as the dev channel), use the following command:

flutter channel dev
flutter upgrade
Copy the code

Unzip the downloaded package, be careful not to unzip it into a directory such as C:\Program Flies\ that requires higher privileges. The author unzipped it to C:\Android\FlutterSDK.

3. Add environment variables

Enter env in the Search TAB next to the Start menu of Windows. Select edit system environment variables and click environment variables in the lower right corner to enter environment variable editing. Add the folder address of the bin folder of the Flutter SDK to the PATH entry of the user variable. Separate it from other addresses. For example, I added the address C:\Android\FlutterSDK\bin.

Flutter is developed using the Dart language. The Flutter SDK includes the Dart SDK, so there is no need to download it separately.

Because domestic access to Flutter may sometimes be restricted, Flutter officials have set up temporary mirror images for Chinese developers. Add the following environment variables to the user environment variables:

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

** note: ** equals before the variable name, the value of the variable after the equal sign! The format is as follows:

The computer needs to be restarted after the environment variable is updated.

4. Run flutter Doctor

Next, execute the command at the command prompt CMD:

flutter doctor
Copy the code

The first time a Flutter command (such as a Flutter Doctor) is run, the dependencies are downloaded and compiled themselves. It will run much faster later.

The above commands examine your existing environment and present the results in a report. Read what it shows carefully to see if there is any software that has not yet been installed or if there are other steps that need to be completed (usually in bold). For example, the result is as follows:

The following command is executed to resolve the first error:

flutter doctor --android-licenses
Copy the code

5. Editor Settings

For Flutter development, VS Code or Android Studio is recommended. VS Code is a lightweight editor that supports Flutter development, execution, and debugging. Android Studio can provide a full IDE experience for Flutter.

(1) VS Code configuration

  • Install VS Code 1.20.1 or later.

  • To install the Flutter plugin, open VS Code, open the View > Commands panel, type Install, and select Extension: Install the Extension. Enter FLUTTER in the extended search input box, then select Flutter in the list and install it. The required Dart plug-ins are automatically installed during this process. Click Reload to restart VS Code.

  • To verify installation: open the View > Command panel, type doctor, and select Flutter: Run Flutter Doctor. Check the OUTPUT panel to see if there are any errors. Make sure that the Flutter is selected in the different OUTPUT Options drop-down list.

(2) Android Studio configuration

  • Install Android Studio 3.0 or later

  • Install the Flutter and Dart Plugins: Open Android Studio and open the plugin Settings (open Configure > Plugins in v3.6.3.0). Then select the Flutter plugin to install. When prompted to install the Dart plug-in, click Yes. When prompted to Restart, click Restart.

If you have any questions about how to download, install, and configure Android Studio, check out this article:

Third, summary

This ends the build up of the Flutter development environment. VS Code is a lightweight, plug-rich editor for Android developers and hobbyists with limited English skills (VS Code has a Chinese plugin). Of course, the full IDE development experience still depends on Android Studio.

For more resources and articles, please follow my wechat official account “Flutter Advance”!