前端VSCode使用Flutter，Flutter安装在Window的步骤过程2020.6

Flutter的中文官网：https://flutterchina.club/setup-windows/
可以参照官网上的安装教程来进行安装

因为Flutter里面是捆绑了Dart的，所以直接安装Flutter就可以了，不用再单独安装Dart。

1.下载安装包

地址：https://flutter.dev/docs/development/tools/sdk/releases#windows

安装包zip解压到你想安装Flutter SDK的路径

2.配置环境变量

（1）配置镜像环境变量
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

（2）配置flutter和dart的环境变量
flutter是刚刚的解压出来的文件，里面的bin目录
dart就是bin目录下的cache下的dart-sdk里面的bin目录

上面四个变量的配置过程步骤如下
右击我的电脑-》属性-》高级系统设置-》环境变量


然后在系统变量这里点击新建

然后输入变量名和变量值点击确定，重复这个过程，这里先配置镜像变量

然后再配置 Flutter 和 Dart 的变量

如下，打开解压出来的flutter文件夹的目录，复制路径

回到刚刚新建变量那里，点击新建，变量名叫FLUTTER_HOME，变量值就是刚刚复制的路径，粘贴过来就可以，然后点击确定

接着，找到系统变量中的Path变量，点击编辑

然后，新建两条内容，如下

%FLUTTER_HOME%\bin
%FLUTTER_HOME%\bin\cache\dart-sdk\bin

接着，刚刚打开的配置变量的全部窗口一路点击确定来关闭（不要点击取消或者直接右上角交叉）

测试

使用下面两个命令查看版本号，如果都能正常显示出版本号说明上面的环境变量配置是没问题的

flutter --version
dart --version

执行结果如下

另外就是检查依赖：
这部分参照中文官网的安装教程，内容如下

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

例如:

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

我的运行结果如下（我的电脑原本已经安装有Android Studio）

按照提示在命令行运行flutter doctor --android-licenses命令可以解决第一个问题，一路按y就可以，执行完成后第一个问题就解决了。

第二和第三个问题是配置开发工具中的插件就可以解决，这里只演示Android Studio的配置（看下面的配置编辑器），没用到IDEA来开发就不用理第三个问题，第四个问题是当前连接的设备，可以暂时不管。

配置编辑器

用Android Studio开发
打开Android Studio，然后打开插件首选项 (File>Settings>Plugins).安装flutter插件

重启Android Studio后插件生效.

再次在CMD命令行执行flutter doctor命令之后结果如下

用VSCode开发
同样是安装两个插件，一个是dart，一个是flutter就可以开发了

模拟器

ios模拟器
mac上使用Xcode打开ios模拟器（window中就模拟不了ios的）

Xcode的安装
第一种方式：通过App Store上搜索Xcode安装即可
第二种方式：安装自己想要的Xcode版本，需要手动下载
下载地址：https://developer.apple.com/download/more

Android模拟器
用Android Studio开发的话，里面就集成了Android模拟器，在AVD Manager中可以配置

创建项目

第一种创建项目的方式
创建一个新的文件夹，然后在这个文件夹的位置打开cmd，输入下面的命令就可以创建一个flutter项目。
testdemo是项目名称，可以自己随便改

flutter create testdemo

创建成功如下

可以看到两条命令提示

cd testdemo
flutter run

第一条就是进入到刚刚创建的项目目录
第二条就是运行这个flutter项目，将它跑起来

第二种创建项目的方式
打开Android Studio，通过Android Studio来创建项目

或者使用上图中红框的下面的那个Open an existing Android Studio project来打开用第一种方式创建的项目

打开之后可以在Android Studio工具栏上打开模拟器设备，又或者点击绿色的三角形运行当前项目

编写的代码都在lib目录下