背景

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

配置Flutter SDK

安装Flutter和Dart插件

既然我们只用 VSCode 来开发,那就先把 Flutter 和 Dart 插件先装上。

打开我们的 VSCode,搜索 Flutter 插件,这里只安装 Flutter 插件就行,因为 Dart 插件会跟着 Flutter 一起安装。

*提示:卸载插件时需要先卸载 Flutter,然后再卸载 Dart 插件。

flutter还是swift flutter vs_flutter还是swift

下载 SDK

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

flutter还是swift flutter vs_java_02

添加环境变量

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

flutter还是swift flutter vs_flutter还是swift_03


在“系统变量”下找到“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 即可。

flutter还是swift flutter vs_dart_04


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

配置JDK

安装 JDK

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

flutter还是swift flutter vs_flutter还是swift_05

添加环境变量

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



CLASSPATH

.;%JAVA_HOME%\lib

JAVA_HOME

你的JDK安装路径

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

测试JDK

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

flutter还是swift flutter vs_java_06

配置Android SDK

安装Android SDK

Android CMD Tools下载地址: 提取码: 662t Android SDK下载地址:AndroidDevTools

打开上面网址后,导航栏找到“Android SDK 工具”-“SDK Tools”,然后下载 24.4.1 版本的 SDK 后安装即可。

flutter还是swift flutter vs_dart_07


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

下载相关API版本

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

flutter还是swift flutter vs_android_08


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

替换Android CMD Tools

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

flutter还是swift flutter vs_jdk_09


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

添加环境变量

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



ANDROID_HOME

你的Android SDK安装路径

然后在 “Path”添加 %ANDROID_HOME%\platform-tools%ANDROID_HOME%\tools 即可。

至此,“Path”下应该有 5 条新配置的变量,如图:

flutter还是swift flutter vs_dart_10

开发环境测试

打开 VSCode 的终端,输入以下命令:

flutter doctor

此时,应该如图所示:

flutter还是swift flutter vs_java_11


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