本文主要分三个部分来讲解VSCode搭建Flutter开发环境
一、Flutter的下载和安装
1.1 Flutter SDK下载
SDK下载地址 选择需要的版本下载即可, 一般都选择最新的.
注: Safari浏览器下载完成后会自动帮助解压成为文件夹, 而其他浏览器下载完成后得到的是压缩包.
1.2 安装和全局路径配置
-
将
Flutter SDK解压后的文件夹移动到一个你指定文件夹下, 最好不要放在桌面或下载里面, 避免后续不必要的麻烦.当然, 如果你下载的是压缩包, 也可以解压到指定文件夹.eg: 我放在了根目录
-
添加
flutter相关工具到path中
-
这一步骤的作用也就是方便不管在任何地方打开终端都能够找到
Flutter SDK代码的路径. -
通过
echo $SHELL在终端中输入会告诉您正在使用哪个 shell, 如果您使用 Bash，请编辑$HOME/.bash_profile或$HOME/.bashrc. 如果您使用的是 Z shell，请编辑$HOME/.zshrc. 如果您使用不同的 shell，则文件路径和文件名在您的机器上会有所不同。eg: 我的电脑室zsh shell, 所以在终端输入
vim $HOME/.zshrc, 进入到到编辑模式, 添加export PATH=/Users/xxx/flutter/bin:$PATH即可. 保存后, 运行source $HOME/.<rc file>以刷新当前窗口，或打开一个新的终端窗口以自动获取文件.注: 其中
xxx/flutter就是你的flutter解压后保存的路径.
- 验证可用性
flutter/bin通过运行以下命令验证该目录现在是否在您的 PATH 中：
echo $PATH
flutter通过运行以下命令验证该命令是否可用：
which flutter
运行以下命令以查看是否需要安装任何依赖项以完成设置:
flutter doctor
注1: Flutter从1.19.0开发版开始，Flutter SDK中就包含Dart SDK的兼容版本，不需要单独再下载.
注2: 要为iOS开发Flutter应用程序，需要下载Xcode工具, 这里不做赘述.
二、VSCode的下载和安装
2.1 VSCode的下载地址和位置
2.2 VSCode插件的安装
-
定位至拓展插件的搜索框(三种方式, 一样的效果)
- 打开VSCode 后, command + shift + x 可快速定位.
- 打开VSCode 后, command + shift + p 打开全局搜索框, 输入
Extensions: Install Extension action会有联想. - 手动点击左侧工具栏最下面一个工具
-
搜索插件、安装插件
搜索框输入
flutter、dart, 点击install 即可. -
VSCode汉化设置
command + shift + p 打开全局搜索框, 输入
language, 点击配置显示语言, 选择zh-cn即可.
三、测试
完成第一、二两步骤, 就代表在Mac上使用VSCode 安装好了Flutter 环境, 接下来创建个项目验证一下, 是否环境可用:
3.1 新建Flutter项目
- command + shift + p, 输入
flutter, 选择:
最后根据提示选择存储位置, 输入项目名, 就ok了.
- 设备选择模拟器或者真机,
F5运行, 会出现如下错误
Could not build the precompiled application for the device. ════════════════════════════════════════════════════════════════════════════════ Building a deployable iOS app requires a selected Development Team with a
意思就是iOS项目没有配置证书. 打开flutter项目中的iOS项目, 配置证书即可.
3.2 真机调试的错误处理
- 无法打开“iproxy”,因为无法验证开发者错误
终端运行: sudo xattr -d com.apple.quarantine /Users/mac/flutter/bin/cache/artifacts/usbmuxd/iproxy
注: /Users/mac/flutter就是你的fluterr 解压后保存的路径
- Could not build the precompiled application for the device .Error launching application on xx.
我得做法: 不一定是最准确的, 但确实是管用的, Xcode，重启，然后在flutter项目目录下执行flutter clean命令，重启，重新运行。会报更多的错误, 需要使用flutter pub get重新获取, 然后就好了.
四. 结语
路漫漫其修远兮，吾将上下而求索~
.End
