Special note: if readers will not science online! Please stop learning first, because readers cannot build a Flutter development environment successfully, so learn science and surf the Internet first, and then come back to study more efficiently when you can open Google.

Build the Flutter Development Environment (Windows)

System requirements

To successfully install and run Flutter on Windows, the reader’s system development environment must meet the following minimum requirements:

  • Operating system: Windows7 or later 64-bit operating system;
  • Disk space: more than 3GB, although officially said 400MB, but also need to install Android Studio and virtual machine, so at least 3GB, 5GB is better, so you can install multiple virtual machine requirements;
  • Tools: Flutter relies on the following command-line tools
    • PowerShell 5.0 or later
    • Git for Windows

Download and install the Java development kit

Download the Java development kit

Java development kit download address, this address will change with the Java upgrade, if changed, please baidu search Java download or directly to the Java official website to download.

Install the Java development kit

First of all, after the download is completed, double click to install, directly click on the next step, installation path readers optional;

Finally, enter Java in the terminal (CMD command line) after the installation is complete. If the following information is displayed, the installation is successful.

Access to Flutter the SDK

  1. Readers can download the latest installation package available on Flutter’s website.Official website download address(If the address is invalid, please contact me as soon as possible)

    Note: Channel versions of Flutter are subject to change. Please refer to the Website of Flutter. Alternatively, readers can download the installation package for The Github Flutter project.Download address.

  2. After downloading, unzip the installation package to a directory that the reader wants to unzip (note: do not unzip the installation package to a directory that requires some high privileges, such asC:\Program Files\)
  3. Find the flutter file in the folder where the installation package zip was decompressedflutter_console.batDouble-click to run and start the flutter command line. Then the reader can run the flutter command in the flutter command line.

Configuring environment Variables

If the reader wants to run the flutter command on the terminal CMD instead of flutter_console.bat, add the following environment variables to the system Path:

  • Control Panel > System and Security > System > Advanced System Settings > Environment Variables
  • Check for an entry named Path under System Variables:
    • If the entry exists, appendflutter\binThe full path ofD:\Development_Tools\Flutter_SDK\flutter\bin), use; As a separator
    • If the entry does not exist, create a new system variable, Path, and set theflutter\binAs its value

Configure the mirror

Because domestic access to Flutter may sometimes be restricted, Flutter officials have set up temporary images for Chinese developers. Readers need to configure the image server address in the user environment variable:

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

instructions
Flutter. IO/community/c…

Run the flutter doctor command

Run the following command on the CMD command line or the Flutter command line to see if any other dependencies need to be installed. If so, install (disk) it:

flutter doctor
Copy the code

This command examines the reader’s environment and displays the report in a command line window. The Dart SDK is packaged with the Flutter SDK. There is no need to install Dart separately. Check the command line output carefully for additional software that may need to be installed or further tasks that may need to be performed.

C:\Users\Administrator>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel master, v1.1.10-pre-.214, on Microsoft Windows [Version 10.0.17134.706], Locale zh-cn) [√] Android Toolchain-developforAndroid Devices (Android SDK Version 28.0.3) [√] Android Studio (Version 3.0) [!] IntelliJ IDEA Ultimate Edition (Version 2017.2) X Flutter Plugin not installed; this adds Flutter specific functionality. X Dart plugin not installed; this adds Dart specific functionality. [!]  Connected device ! No devices available ! Doctor found issuesin 2 categories.
Copy the code

This is my command output. When the reader runs the Flutter Doctor on his computer, he will see more [X] in the command output than he does. Since the reader has not installed Android Studio (AS), here is how to download and install AS.

Android Studio download and install

A Flutter application can theoretically be built using any text editor and command-line tool. However, Flutter officials recommend using Android Studio and one of VS Code’s editors for a better development experience. By integrating the Flutter plugin with the editor, you can obtain code completion, syntax highlighting, widget editing assistance, runtime and debugging support, which can greatly improve your development efficiency.

Download the AS

DOWNLOAD the AS installation package directly from the official website (official website address). After entering the official website, click the “Android Studio” menu bar and see the following interface. Click the “DOWNLOAD Android Studio” button to DOWNLOAD the AS installation package.

Install the AS

After downloading the AS installation package, double-click to install it. The installation process is almost like clicking the next step. If you really do not know how to install it, please refer to the AS download installation and configuration tutorial.

After the AS installation is complete, open the CMD command line and run the FLUTTER doctor command to verify that the flutter has been successfully installed.

Installing an Android Certificate

After installing AS, open CMD again and enter the flutter doctor command. The number of [X] will be significantly reduced, but the reader may encounter 1 or 2 more [X], one of which indicates that the Android certificate is not installed. To install the certificate, execute the following command in CMD:

flutter doctor --android-licenses
Copy the code

Then the reader will be prompted to choose Y/N, do not hesitate to choose Y, you can install the certificate successfully.

Install the Flutter plug-in on AS

Open the AS client and go to File > Settings > Plugins > Browse Repositories > Enter Flutter > Install

AS creates the Flutter project

  1. Go to File > New Flutter Project
  2. Click Flutter Application as the Project type and then click Next
  3. Enter a project name, such as MyApp, and click Next
  4. Click Finish
  5. Wait for Android Studio to install the SDK and create the project

AS runs the Flutter project

  1. Navigate to the AS toolbar:
  2. In target Selector, select an Android device running the application. If not listed, choose Tools > Android > AVD Manager and create one.
  3. Click the Run icon in the toolbar.
  4. The application will be launched on the reader’s real device or emulator.

VS Code download and installation

VS Code is a lightweight editor that supports Flutter running and debugging.

Download the VS Code

To Download the VS Code installation package, go to the official website and click the “Download” button. Then you will see the following interface and click the Windows button to Download:

Install VS Code

After the VS Code installation package is downloaded, double-click to install it. The installation process is almost like clicking Next next.

Install the Flutter plugin on VS Code

  1. Start the VS Code client
  2. Go to View > Command Palette…
  3. Type Install, then select Extensions:Install Extensions
  4. Enter Flutter in the input box, select Flutter in the search results list, and then click Install
  5. Select OK and restart VS Code
  6. Verify the configuration
    • Go to View > Command Palette…
    • Enter doctor, then select Flutter:Run Flutter Doctor
    • See if there is a problem with the OUTPUT in the OUTPUT window

VS Code creates the Flutter project

  1. Start the VS Code client
  2. Go to View > Command Palette…
  3. Enter Flutter in the input box and select Flutter:New Project in the list of search results
  4. Enter a Project name, such as MyApp, and press Enter
  5. Specify where to place the item, and then press the blue OK button
  6. Wait for the project to be created and display the main.dart file

VS Code runs the Flutter project

Open the TERMINAL window and run the flutter run command as shown in the figure below:

Build the Flutter Development Environment (MacOS)

System requirements

To successfully install and run Flutter on MacOS, the reader’s system development environment must meet the following minimum requirements:

  • Operating system: MacOS 64-bit operating system
  • Disk space: more than 700MB (not including Xcode or Android Studio disk space, if included, preferably more than 3GB)
  • Tools: Flutter dependencyMkdir, rm, git, curl, unzip, whichThese command-line tools

Access to Flutter the SDK

  1. Readers can download the latest installation package available on Flutter’s website.Official website download address(If the address is invalid, please contact me as soon as possible)

    Note: Channel versions of Flutter are subject to change. Please refer to the Website of Flutter. Alternatively, readers can download the installation package for The Github Flutter project.Download address.

  2. After downloading, unpack the installation package to a directory that the reader wants to unpack, for example:
cd~ / development unzip ~ / Downloads/flutter_macos_v0. 5.1 beta. ZipCopy the code

Configuring environment Variables

Adding Flutter to PATH allows readers to run Flutter commands in any terminal session tool.

  1. Open the terminal session tool and use vim to configure environment variables as follows:
vim ~/.bash_profile
Copy the code
  1. inbash_profileAdd the following path to the file:
export PATH=~/development/flutter/bin:$PATH
Copy the code

Note: the above path is based on the actual directory to which the reader unzipped the package, but you can also unzipped the package to the development folder in the root directory as I did.

  1. This parameter is required after the configuration is completesourceReload the command as follows:
source ~/.bash_profile
Copy the code

Note: if the reader is using a Zsh terminal, ~/.bash_profile will not be loaded when the terminal starts. The solution is to modify ~/.zshrc to add: source ~/.bash_profile

  1. Check whether environment variables are configured successfully
flutter -h
Copy the code

If the following information is displayed, environment variables are configured successfully.

Configure the mirror

Because domestic access to Flutter may sometimes be restricted, Flutter officials have set up temporary images for Chinese developers. Readers need to configure the image server address in the environment variable:

  1. Open the terminal session tool and use vim to configure environment variables as follows:
vim ~/.bash_profile
Copy the code
  1. In the bash_profile file, add the following path:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code
  1. After the configuration is complete, use the source command to reload it as follows:
source ~/.bash_profile
Copy the code

Note: if the reader is using a Zsh terminal, ~/.bash_profile will not be loaded when the terminal starts. The solution is to modify ~/.zshrc to add: source ~/.bash_profile

Note: This image is temporary and not guaranteed to be always available. Readers can refer to flutter. IO /community/c… To get the latest news about the image server.

Xcode download and installation

Readers who want to build and run Flutter applications on iOS devices need to download and install Xcode9.0 or later.

  1. Download and install Xcode9.0 or later (via the link or from the app store);
  2. Configure the Xcode command-line tool to use the newly installed version of Xcode;
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Copy the code

For most cases, this is the correct path when the reader wants to use the latest version of Xcode, but specify the path if the reader wants to use a different version.

  1. Be sure to open Xcode with an Xcode license or by commandsudo xcodebuild -licenseApproved the Xcode license agreement.

Android Studio download and install

Readers who want to build and run Flutter applications on Android devices need to download and install Android Studio (AS).

Download the AS

DOWNLOAD the AS installation package directly from the official website (official website address). After entering the official website, click the “Android Studio” menu bar and see the following interface. Click the “DOWNLOAD Android Studio” button to DOWNLOAD the AS installation package.

Install the AS

After the AS installation package is downloaded, you can use the unique installation method of MacOS to successfully install it.

After the AS installation is complete, open the terminal tool and run the flutter doctor command to verify that the FLUTTER is successfully installed.

Installing an Android Certificate

After installing AS, open the terminal tool again and type flutter doctor. The number of [X] will be significantly reduced, but the reader may encounter 1 or 2 more [X], one of which will indicate that the Android certificate is not installed. Install the certificate by executing the following command in the terminal tool.

flutter doctor --android-licenses
Copy the code

Then the reader will be prompted to choose Y/N, do not hesitate to choose Y, you can install the certificate successfully.

Install the Flutter plug-in on AS

Open the AS client and go to Preferences > Plugins > Browse Repositories > Enter Flutter > Install

AS creates the Flutter project

  1. Go to File > New Flutter Project
  2. Click Flutter Application as the Project type and then click Next
  3. Enter a project name, such as MyApp, and click Next
  4. Click Finish
  5. Wait for Android Studio to install the SDK and create the project

AS runs the Flutter project

  1. Navigate to the AS toolbar:
  2. In target Selector, select an Android device running the application. If not listed, choose Tools > Android > AVD Manager and create one.
  3. Click the Run icon in the toolbar.
  4. The application will be launched on the reader’s real device or emulator.

VS Code download and installation

VS Code is a lightweight editor that supports Flutter running and debugging.

Download the VS Code

To Download the VS Code installation package, go to the official website and click the “Download” button. Then you will see the following interface and click the Mac button to Download:

Install VS Code

Once the VS Code installation package is downloaded, drag and drop to install it using MacOS’s unique installation method.

Install the Flutter plugin on VS Code

  1. Start the VS Code client
  2. Go to View > Command Palette…
  3. Type Install, then select Extensions:Install Extensions
  4. Enter Flutter in the input box, select Flutter in the search results list, and then click Install
  5. Select OK and restart VS Code
  6. Verify the configuration
    • Go to View > Command Palette…
    • Enter doctor, then select Flutter:Run Flutter Doctor
    • See if there is a problem with the OUTPUT in the OUTPUT window

VS Code creates the Flutter project

  1. Start the VS Code client
  2. Go to View > Command Palette…
  3. Enter Flutter in the input box and select Flutter:New Project in the list of search results
  4. Enter a Project name, such as MyApp, and press Enter
  5. Specify where to place the item, and then press the blue OK button
  6. Wait for the project to be created and display the main.dart file

VS Code runs the Flutter project

Open the TERMINAL window and run the flutter run command as shown in the figure below:

Install other Software

The reader runs the Flutter Doctor using the terminal again to check if the following appears:

To install, run: Brew install --HEAD libiMobileDevice brew install ideviceInstaller onto ios-deploy not installed. To install: Brew install ios-deploy qualify CocoaPods not installed. CocoaPods is used to retrieve the ios platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setupCopy the code

Brew commands are recommended for Flutter installation, so readers can enter the following commands directly into the terminal tools:

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
Copy the code

After each command is typed, wait for the software package to be installed successfully!

Connect devices to run Flutter applications

Build and run Flutter on Windows only on Android devices, while MacOS supports both iOS and Android devices. Here is how to connect To Android and iOS devices to run Flutter.

Connecting to the Android Emulator

To run and test the Flutter application on an Android emulator, follow these steps:

  1. Start Android Studio > Tools > Android > AVD Manager and select Create Virtual Device.
  2. Select a device and click Next.
  3. Select one or more system images (x86 or x86_64 images are recommended), and then click Next.
  4. Under Emulated Performance, select Hardware-gles 2.0 to enable Hardware acceleration.
  5. Verify that the AVD configuration is correct, then click Finish. For more information on the above steps, see Managing AVDs.
  6. Android Studio: In “Android Virtual Device Manager”, click on the Run icon in the toolbar and you will see the application launched on the emulator.
  7. VS Code: Open the TERMINAL window and runflutter runCommand, and you will see the application launched on the emulator.

Connect to a real Android device

Readers need Android 4.1 (API Level 16) or higher to run and test Flutter on a real Android device.

  1. Enable developer options and USB debugging on Android real devices. Detailed instructions can be found in the Android documentation.
  2. Use USB to plug your phone into your computer. If a debug authorization message appears on the device, please authorize your computer to access the device.
  3. In the editor, open the TERMINAL window and runflutter deviceCommand to verify that the editor recognizes the reader connected to the Android real device.
  4. Android Studio: In “Android Virtual Device Manager”, click on the Run icon in the toolbar and you will see the app launched on the Android real phone.
  5. VS Code: Open the TERMINAL window and runflutter runCommand, and you will see the application launched on the Android real phone.

Connecting to the iOS Emulator

To run and test the Flutter application on an iOS emulator, follow these steps:

  1. On your MacOS, find the emulator with Spotlight or the following command:
open -a Simulator
Copy the code
  1. Make sure the emulator is using a 64-bit Device (iPhone 5S or later) by checking the Settings in the Emulator Hardware > Device menu.
  2. Depending on the size of the reader’s computer screen, an analog HD iOS device may overflow the screen. You can set the device Scale in the emulator under the Window> Scale menu.
  3. Run it in the editorflutter runCommand to start the Flutter application.

Connect to a real iOS device

To install the Flutter application on a real iOS device, readers need some additional tools, an Apple account, and some Settings in Xcode.

  1. Install Homebrew (skip this step if you already have brew installed).
  2. Open the terminal and run the following commands:
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
Copy the code

Wait for a while after each command is typed, waiting for success! If any of these commands fail and an error occurs, run the brew doctor command and follow the instructions to resolve the problem.

  1. Follow the Xcode signing process to configure the reader’s project:
    • Pass through the reader’s Flutter project directoryopen ios/Runner.xcworkspaceOpen the default Xcode workspace.
    • In Xcode, select on the left side of the navigation panelRunnerThe project.
    • inRunnerIn the Target Settings page, make sure thatGeneral > Signing > TeamSelect the development team. When selecting a team, Xcode creates and downloads development certificates, registers accounts with the appliance, and creates and downloads configuration files (if required).
    • To develop your first iOS development project, you may need to log in to Xcode with your Apple ID.

      Any Apple ID supports development and testing, but to distribute your App to the App Store, you must sign up for the Apple Developer Program, which you can find out for yourself.

    • When attaching a real device for iOS development for the first time, you need to trust both the Mac and the development certificate on the device. When connecting an iOS device to MacOS for the first time, select this option in the dialog boxTrust.

      Then, go to the iOS deviceSet up theMenu, selectGeneral > Device ManagementAnd trust the reader’s credentials.

    • If automatic signature fails in Xcode, verify the project’sGeneral > Identity > Bundle IdentifierWhether the value is unique.
    • Run it in the editorflutter runCommand to start the Flutter application.

Flutter SDK upgrades

Upgrade the Flutter SDK and dependencies

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

flutter upgrade
Copy the code

This command will update both the Flutter SDK and the reader’s Flutter project dependencies. If you only want to update the Flutter project dependencies (excluding the Flutter SDK), you can use the following command:

  • flutter packages getGet all dependencies for the project
  • flutter packages upgradeGets the latest versions of all dependencies for your project

Flutter SDK branch

The Flutter SDK has multiple branches, such as Beta, dev, master, and stable. The stable branch is the stable branch (and may also have new stable branches after a new stable version is released, such as 1.0.0). Dev and Master are the development branches. Readers can run the Flutter Channel to view all branches. If the author runs the flutter channel locally, the result is as follows:

Flutter channels:
  beta
  dev
* master
Copy the code

To switch branches, you can use a Flutter channel beta or a Flutter Channel master. The Flutter official recommends that you track stable branches, but readers can also track master branches. This allows you to see the latest changes, but it’s much less stable.

Common Configuration Problems

Error runing Gradle Error resolved

When debugging a project, the most common errors are errors like the following.

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'. > Could not find lint - gradle - API. Jar (com) android) tools. The lint: lint - gradle - API: 26.1.2). Searchedin the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.
Copy the code

The cause of this problem, or a unique problem in China, the solution is to change ali link.

  1. Modify the android directory under the projectbuild.gradleFile, remove the Google () and jcenter() lines. Change to Ali’s link.
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
Copy the code

Full code:

buildscript {
    repositories {
        //  google()
        //  jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com. Android. Tools. Build: gradle: 3.1.2'
    }
}

allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

rootProject.buildDir = '.. /build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
Copy the code

Note that there are two changes, not just one.

  1. Modify the Flutter SDK packageflutter.gradleThe directory varies depending on where the reader’s SDK is stored. For example, if THE author placed the Flutter directory on disk D, the path would be this.
D:\Flutter\flutter\packages\flutter_tools\gradle
Copy the code

Open the file to modify, modify the code as follows (in fact, also change ali’s path can be).

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com. Android. Tools. Build: gradle: 3.1.2'}}Copy the code

And then Debug again, you can basically start up.

There is also an error saying that the hardware does not start GPU, need to download and install a program, this prompt is very clear, not to do too much introduction.

Lack of dependency library issues

The error is shown in the picture below. Click the hyperlink to automatically jump to the installation page:

Failed to connect to Android Repository

This is one of the most common problems and should be a priority when you find yourself unable to download partial dependencies. File -> Settings -> Appearance & Behavior -> System Settings -> Android SDK -> SDK Update Sites list You can see that the Android Repository is not connected at this point.

Solutions are as follows:

  1. Enter theC:\windows\system32\drivers\etc\
  2. Open thehostsfile
  3. add203.208.41.32 dl.google.comCan solve

Android package configuration problem

The general format is

Could not HEAD **
Could not Get **
Copy the code

Android Studio Could not GET Gradle-3.2.0.pom Android Studio Could not GET Gradle-3.2.0.pom

  1. Enter the current project name/Android
  2. Open thebuild.gradle
  3. Find the bottom part and addmaven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
allprojects {
   repositories {
     google()
     jcenter()
     maven { url 'http://maven.aliyun.com/nexus/content/groups/public/'} // Add this sentence}}Copy the code
  1. Go to File -> Settings -> Build, Execution, Deployment -> Gradle -> Android Studio and check Enable Embedded Maven Repository. Restart Android Studio.

Note: There is such a situation, when the reader according to the above steps after setting, still can not solve the problem, and there is an error message like Could not HEAD maven.aliyun.com, Please check if C:\Users\{user_name}\.gradle\gradle.properties has agent set, delete it and the problem will be solved.

Hot Reload Hot overload failure

Hot Reload is disabled when you set a proxy for a Terminal emulator like Terminal, Save (CMD-s/Ctrl-s) will not be reloaded, and the Hot Reload button (with the lightning ⚡️ icon) will not be displayed. Remove the proxy.

In addition, there are cases where Hot Reload doesn’t work, such as when the main function is changed, or when the global static method is changed, and so on. You can assume that Hot Reload only rebuilds the Widget tree, and that it doesn’t work if the change isn’t made during the Widget tree building.

Finally, I hope everyone can install successfully, the above is just the author of the installation process, can not guarantee all correct; However, I did my best to describe in detail how to build a Flutter development environment on Windows and Mac to help Flutter developers.