参考链接:jspang.com/post/flutte…
JAVA环境的安装
- 下载JDK,JAVA环境jdk下载地址:www.oracle.com/technetwork…, 安装完成到终端(命令行)里输入java,进行检测。
下载安装 FlutterSDK
-
去官网下载Flutter安装包,下载地址:flutter.io/sdk-archive…
-
将安装包zip解压到你想安装Flutter SDK的路径(如: E:\fluter\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。
-
在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
-
如果你想在任何地方都可以执行Flutter命令,你需要把Flutter SDK的目录配到环境变量中的path条目下。
进行Flutter doctor 的测试
双击flutter_console.bat,在打开的终端中输入flutter doctor,
当全部为`V`时,表示环境已配好。因为现在有好多还没下载安装,所以`X`会比较多。
复制代码
Android Studio的安装
- 下载Android Studio:直接到官网进行下载就可以了。下载地址:developer.android.com/ 进入后向下拉,然后点击下载按钮。
- 安装Android Studio 软件:这个安装差不多都是下一步下一步。
打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。
点中间的Search in repositories,然后点击安装。安装完成后,你需要重新启动一下Android Studio软件。
安装Android证书
-
安装好Android Studio后,再次打开终端(命令行),输入flutter doctor,这时候的x会明显减少,但是你还是会遇到1-2个,其中有一个就是提示没有安装证书。安装证书只要在终端里执行下面的命令。
flutter doctor --android-licenses 复制代码
然后会提示你选Y/N,不要犹豫,一律选择Y,就可以把证书安装好。
安装AVD虚拟机, 让Flutter跑起来
- Android studio新建Flutter项目
- 打开第二个窗口后,选择第一个选项Flutter Application(flutter应用)。
-
这步完成后,系统就会自动为我们创建一个Flutter项目(新建项目的过程也是很慢的,它要去谷歌下载gradle,这个东西很容下载失败,如果失败,可以多反复试几次)。
-
安装AVD虚拟机
1.现在需要一个虚拟机来运行我们的程序,可以点击Android Studio 中的上方菜单tool -AVD Manager选项。 复制代码
2.点击Create Virtual Device.....
复制代码
3.选择虚拟机类型,这个你随意选就好,我选择的是Nexus 5x
复制代码
4.选择系统,这里尽量选择最新的,我选择了Android 9.0系统,
选择好后,又是一个漫长的等待过程。
5.安装好后,点击开始按钮,运行虚拟机了(第一次运行,需要安装系统,会慢一些),运行起来后,如下图。
复制代码
VSCode下玩转Flutter
- 打开VSCode的Flutter插件界面,然后用在搜索框中输入Flutter,第一个就是Flutter插件了。点击install就可以进行安装了
一条命令快速开启虚拟机
查找emulator.exe文件的路径
复制代码
我的emulator.exe文件的路径为C:\Users\wangtingting1\AppData\Local\Android\Sdk\emulator\emulator.exe(AppData文件夹有可能会被隐藏,如果找不到,请试试以下方法)
- 打开Android Studio,并查看你的AVD虚拟机名称
-
新建bat文件,根据虚拟机名称和文件路径,把bat文件输入成如下形式。
C:\Users\wangtingting1\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28 复制代码
别忘记下划线,进行保存后双击bat文件,就可以迅速打开虚拟机了。
flutter run 开启预览
现在模拟器也有了,VSCode也支持Flutter开发了.现在可以在VSCode中直接打开终端,
快捷键是ctrl+~,然后在终端中输入下面的命令。
flutter run
经过短暂的编译后就会启动我们的程序了
到此处,终于搭建出了适合前端程序员的开发环境
复制代码
我在搭建环境时遇到的问题如下
第一个
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.lint:lint-gradle-api:26.1.2).
Searched in 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.
复制代码
这个问题的产生的原因,还是中国特有的问题,解决方案是改位阿里的链接
第一步:修改掉项目下的android目录下的build.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 '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
}
复制代码
第二步:修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了D盘Flutter目录下,那路径就是这个。
D:\Flutter\flutter\packages\flutter_tools\gradle
复制代码
打开文件进行修改,修改代码如下(其实也是换成阿里的路径就可以了)。
buildscript {
repositories {
//jcenter()
// maven {
// url 'https://dl.google.com/dl/android/maven2'
// }
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'
}
}
复制代码
然后再重新Debug一下,就基本可以启动起来。
还有一种错误是说硬件没有启动GPU,需要下载安装一个程序,这个提示的很清楚,不做过多的介绍了。