配置Flutter开发环境(VS Code)

以下配置前提：

使用 macOS 平台
已安装Xcode 7.2或更高版本
模拟器正在使用64位设备（iPhone 5s或更高版本）
如果将 Flutter 应用安装到iOS真机设备，那么需要一些额外的配置以及Apple ID。

具体环境配置前提可参考
Flutter 中文网

Flutter官方为中国开发者搭建了镜像，以下是使用镜像设置过程的简单几步步骤。1. 需要去flutter官网下载其最新可用的安装包，下载链接，然后解压安装包。

2. 将永久将Flutter添加到PATH中

确定Flutter SDK的目录，并保存.

打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.(使用 "command + shift + ." 快捷方式可以快捷查看隐藏文件)

添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
```
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH (注意：其中PATH_TO_FLUTTER_GIT_DIRECTORY 为第一步保存的Flutter SDK的目录）
```

3. 重新退出并刷新终端，执行一下命令查看 flutter 是否需要安装其它依赖项来完成安装：

flutter doctor

具体环境配置可参考
Using Flutter in China

执行flutter doctor命令：查看是否需要安装其它以来项目来完成安装

flutter doctor.png

4.1 如果没有下载安装 VS Code ，需要下载安装 VS Code 软件，并在软件内安装 Flutter 以及 Dart 依赖。

调用 View>Command Palette…，输入"install"，选择"install extensions"，在安装依赖包处搜索并 install 上述依赖。

然后退出并重启VS Code。

4.2 如果没有下载安装 XCode 软件，需要去 App Store 下载并安装 XCode 开发软件(该软件自带 iOS Simulator)。

安装完备后，重新在终端执行 flutter doctor 指令，查看是够还存在问题。没有问题，那么即表示我们的环境配置完成。

创建一个新的Flutter程序

此处表述的均是使用 VS Code的前提。

1.启动 VS Code
2.调用 View>Command Palette…
3.输入 ‘flutter’,然后选择 ‘Flutter: New Project’ action
4.输入 Project 名称 (如 myapp), 然后按回车键
5.指定放置项目的位置，然后按蓝色的确定按钮
6.等待项目创建继续，并显示main.dart文件

*如果在VS Code中，已经 install 了 flutter 然而在‘Flutter: New Project’ 的时候，报如下错误，那么可能是上述第一步Flutter开发环境搭建有问题

new flutter报错.png

运行应用程序

确保在VS Code的右下角选择了目标设备，按 F5 键或调用Debug>Start Debugging。等待应用程序启动如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

flutter程序运行页面.png

*查看VS Code右下角选择的目标设备如图所示，并在这里可以点击切换模拟器或是真机

VS Code右下角设备选择.png

最后编辑于：2020.02.14 16:46:35