Flutter指南之环境完整搭建

背景

之前早就听说 Flutter 在开发安卓 APP 上很方便，但因为时间问题迟迟没有下载配置玩玩。最近心里痒痒想试看看 Flutter 是否有那么强大，所以今天就下定决定下载配置一番，环境搭建过程可谓是艰难呐！但是我电脑已经有了 VSCode，不想再装一个 Android Studio，所以接下来我会给大家介绍下怎么给 VSCode 配置 Flutter 开发环境。

配置Flutter SDK

安装Flutter和Dart插件

既然我们只用 VSCode 来开发，那就先把 Flutter 和 Dart 插件先装上。
打开我们的 VSCode，搜索 Flutter 插件，这里只安装 Flutter 插件就行，因为 Dart 插件会跟着 Flutter 一起安装。
*提示：卸载插件时需要先卸载 Flutter，然后再卸载 Dart 插件。

下载 SDK

腾讯镜像专用地址：flutter_sdk
先从上面地址里下载对应的 SDK 包，解压到一定的目录里，并重命名为 flutter_sdk_1.17.5（你下载啥版本，后缀版本号就改为对应的就行，方便以后查看 Flutter 版本）。

添加环境变量

桌面找到“此电脑”，然后右键选择“属性”，在左侧找到“高级系统设置”，在“高级”选项卡找到“环境变量”，打开它。

在“系统变量”下找到“Path”键，添加以下值：

X:\flutter_sdk_1.17.5\bin

请替换成你的 Flutter SDK 路径，要指向 Flutter SDK路径\bin。添加好后，别急着关闭环境变量对话框，后面还会用到。

优化下载链接

找到 你的SDK安装路径\packages\flutter_tools\gradle，打开 flutter.gradle文件，注释掉 google() 和 jcenter() 并改成下面代码：

buildscript {
     
    repositories {
     
        //google()
        //jcenter()
         maven {
      url 'https://maven.aliyun.com/repository/google' }
         maven {
      url 'https://maven.aliyun.com/repository/jcenter' }
         maven {
      url 'https://maven.aliyun.com/repository/public' }
    }
    dependencies {
     
        classpath 'com.android.tools.build:gradle:3.5.0'
    }
}

然后继续找到 private static final String MAVEN_REPO 字段，将后面的地址改为 https://storage.flutter-io.cn/download.flutter.io，修改完毕后关闭文件。
同文件夹下再打开另一个文件 resolve_dependencies.gradle，将相关代码片段改为：

repositories {
     
    google()
    jcenter()
    maven {
     
        url "http://download.flutter.io"
    }
}

如何处理 Running Gradle task ‘assembleDebug’？

尽管对链接进行了优化，但执行 flutter run 命令时，还会出现一直处于 Running Gradle task 'assembleDebug' 的情况。对此相关的解决办法是：打开 C:\Users\你的用户名\.gradle\wrapper\dists 文件夹，你应该可以看到 gradle-x.x.x-all 的文件夹，一直点进去可以看到有 gradle-x.x.x-all.zip.part (这个是 Flutter 下载 Gradle 的缓存文件)、gradle-x.x.x-all.zip.ok (这个是 Flutter 判断下载 Gradle 是否完毕的标记文件，建立空文件，后缀加 .ok 就行)、gradle-x.x.x-all.zip.lck 这些文件（那些文件有些可能没有，但不要紧），先从 gradle 下载对应版本的 gradle，然后放进上述路径的文件夹里，解压后关闭 VSCode 终端重新 flutter run 即可。

另外，如果 Running Gradle task 'assembleDebug' 很长时间后报错的话，尝试换旧版本的 JDK，比如我现在用的 JDK 是 1.8_121，Flutter 用的 1.20.2，被这个坑很久！！！

配置JDK

安装 JDK

国内下载地址：AndroidDevTools
打开上面网址后，导航栏找到“Android SDK 工具”-“JDK”，然后下载 1.8 版本的 JDK 后安装即可。

添加环境变量

在“系统变量”添加以下相关键和值：

键	值
CLASSPATH	.;%JAVA_HOME%\lib
JAVA_HOME	你的JDK安装路径

然后在 “Path”添加 %JAVA_HOME%\bin 和 %JAVA_HOME%\jre\bin 即可。

测试JDK

打开 CMD，输入 java 或 javac ，如果能正常返回信息，则表明 JDK 环境配置正常，反之，则有问题。

配置Android SDK

安装Android SDK

Android CMD Tools下载地址： 提取码: 662t
Android SDK下载地址：AndroidDevTools
打开上面网址后，导航栏找到“Android SDK 工具”-“SDK Tools”，然后下载 24.4.1 版本的 SDK 后安装即可。

这里说明一下，上面的 3859397 只是一个 Android CMD Tools 工具，和我提供的 Android CMD Tools 一样，只是我提供的版本相对较新。

下载相关API版本

下载解压完毕后，打开 你的Android SDK路径\tools\android.bat 文件，此时会启动 Android SDK Manager，将需要的 Tools SDK Platform 勾选就行，然后勾选下面 Obsolete ，然后点击安装包即可。

安装完毕后，返回刚才的SDK路径，此时应该有生成文件夹 build-tools、platforms、platform-tools，里面还有对应各版本的 API 文件。

替换Android CMD Tools

处理完 API 后，将 Android SDK 里面的 tools 文件夹内的文件全部删除，再将 Android CMD Tools 下的 tools 文件夹替换进去，此时文件夹应该如图：

之所以这样做，是因为下载的 24.4.1 自带的 tools 版本过低，导致 flutter doctor 老是提示 Android license status unknown.，升级或者更换新版本的 Android CMD Tools 就行了。 如果出现上述问题，可以尝试换 Android CMD Tools 版本后再 flutter doctor 和 flutter doctor --android-licenses（不然会出现命令不能识别的情况）。

添加环境变量

在“系统变量”添加以下相关键和值：

键	值
ANDROID_HOME	你的Android SDK安装路径

然后在 “Path”添加 %ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\tools 即可。
至此，“Path”下应该有 5 条新配置的变量，如图：

开发环境测试

打开 VSCode 的终端，输入以下命令：

flutter doctor

此时，应该如图所示：

因为我们没有用到 Android Studio，所以出现感叹号属于正常，如果没插入手机，第四个选项也会出现感叹号。但是主要还是前面两个，只要显示打勾，那就表明环境搭建没问题了。这样 Flutter 开发环境就搭建完啦！