Flutter超详细环境搭建

2022-02-04

前提：以下都是在Windows环境下搭建

1、下载flutterSDK 1-1、配置环境变量

配置该环境变量是因为国内的网络环境无法访问gogole网站，开发时必不可少的会安装一些依赖包，所以我们首先配置下环境变量

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

文章图片
image.png

文章图片
image.png
1-2、进入官网下载SDK
官网下载地址
下载flutterSDK可以通过直接下载压缩包，也可通过git来下载

文章图片
image.png

文章图片
image.png
1-3、配置flutterSDK环境变量

在Path系统变量中新增刚下载的SDK中的bin目录
这是博主下载的SDK目录：D:\vsCode\flutterSDK\flutter\bin

文章图片
image.png 1-4、配置完成之后进行测试
在命令窗口中flutter --version

文章图片
image.png
2、安装Android Studio

注意：强烈建议AndroidSDK不要安装在C盘，因为AndroidSDK很大往往需要7、8G内存,如果内存大的土豪可以忽略

详情安装Android Studio可以查看这篇文章；安装好Android Studio后不用创建程序

2-1、查看AndroidSDK安装情况

文章图片
image.png

文章图片
image.png

博主把一些常用版本的SDK都安装了

2-2、在Android Studio上安装Flutter插件

文章图片
image.png

文章图片
image.png

flutter插件默认会把dart安装上

2-3、配置环境变量 ANDROID_HOME=你的AndroidSDK目录

文章图片
image.png
3、安装JDK

前往javaSE官网下载

注意：建议JDK不要安装在C盘，土豪请随意

文章图片
image.png

3-1安装完JDK它会主动弹出叫你安装jre，也要一并安装

一直下一步即可

文章图片
image.png

3-2配置环境变量 JAVA_HOME=你的JDK安装目录

CLASSPATH=.;
%JAVA_HOME%\lib;
%JAVA_HOME%\lib\tools.jar

Path=%JAVA_HOME%\bin;
%JAVA_HOME%\jre\bin;

Path这一步注意win7用户注意分号需要加上、win10用户需要分开加两条

3-3测试

命令窗口:java -version

文章图片
image.png

命令窗口:javac

文章图片
image.png

4、配置android许可证

在命令窗口执行flutter doctor --android-licenses
窗口会询问你一些哔哔东西一直Y就行

文章图片
image.png

5、测试Flutter环境是否可行

命令窗口:flutter doctor

文章图片
image.png
这里博主这里出现错误，提示是没有安装flutter插件，但是在第二部中我们已经安装了，先创建个项目试试

6、使用vscode进行开发

如果你并不想使用该编辑器开发，那么可以不用进行操作,可以直接使用android studio进行开发
进入官网下载

6-1、安装完成后下载flutter插件

文章图片
image.png

【Flutter超详细环境搭建】flutter widget snippets是代码提示插件，我们也一并装上

7、使用安卓模拟器进行开发

如果使用真机调试，当然也可以使用android studio里的模拟器，博主感觉android studio笨重太大，卡所以就舍弃了，那么忽略此步骤，推荐夜神模拟器

7-1使编辑器连上模拟器

进入模拟器bin目录命令窗口nox_adb.exe connect 127.0.0.1:62001

文章图片
image.png
表示连接成功

8、使用vsCode创建flutter项目

在vscode中按住ctrl + shift + p弹出命令窗口输入 flutter

文章图片
image.png
然后在终端中执行 flutter run执行这一步一定要看下右下角是否有模拟器连上

文章图片
image.png
No Device没有模拟器链接

文章图片
image.png
已经连上模拟器了

文章图片
image.png

推荐阅读

上一篇：神秘巨星观感

下一篇：一双红色手套