Flutter Mac上使用VSCode支持Flutter开发

Flutter技术交流群: 942885858。

---

1.安装VSCode

---

2.下载Flutter

官网下载 或者 Github下载

下载完成之后,需要建立一个文件夹存放Flutter,这个文件夹位置随意,最好放到方便自己管理的地方，比如我在桌面建立一个 Flutter 文件夹，将下载并且解压了的文件或者克隆的文件直接放入 Flutter 文件夹里面，因为我是在桌面创建的文件夹，那么地址也就是

/Users/xxx/Desktop/Flutter/flutter

bin文件路径

/Users/xxx/Desktop/Flutter/flutter/bin

效果图

Github下载 错误注意: 如果使用 ,我第一次使用的是直接下载ZIP包，但是却在 【3.配置Flutter】 路径之后报错如下

MacBook-Pro:~ MacBook-Pro$ flutter -h
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b stable https://github.com/flutter/flutter.git

错误告诉我们: 
flutter目录不是github项目的克隆 
需要用到git 
无法正常运行，要求我们使用克隆下载

那么我们就使用克隆下载Flutter, 下面链接中的 stable 是分支名,可以根据自己需求修改，
stable 分支是Flutter稳定分支，你可以跟踪master分支，但注意这是开发分支，所以稳定性要低得多，可以参考官方解释

$ git clone -b stable https://github.com/flutter/flutter.git

克隆下来的项目文件也还是放到 Flutter 文件夹中，这样下载就完成了。

---

3.配置Flutter

上面已经下载好Flutter, 也存放到文件夹, 那么我们来配置一下。

1.打开终端工具，输入命令:

$ vim ~/.bash_profile

2.加入下面代码到文件里

第3行路径是你在 Flutter 里面 bin文件路径, 也就上面下载里面贴出来的bin文件路径
这行可以根据你存放的路径更换，总之指定为bin路径就行。 第1，2行则是官方文件中说的镜像问题，所以我们直接添加进来。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xxx/Desktop/Flutter/flutter/bin:$PATH

添加好之后 :wq 保存。

配置完成后，需要用source命令重新加载一下

$ source ~/.bash_profile

4.检查Flutter

检查是否安装了 Flutter

方法一

$ flutter -h

如果没有安装就会出现【方法二】中的下载进度页面, 如果安装了则会出现

MacBook-Pro:~ MacBook-Pro$ flutter -h
Manage your Flutter app development.

Common commands:

flutter create 

Create a new Flutter project in the specified directory.

flutter run [options]
Run your Flutter application on an attached device or in an emulator.

Usage: flutter  [arguments]

Global options:
-h, --help                  Print this usage information.
......

如果安装成功之后, 还是需要使用 【方法二】 中的 $ flutter doctor 命令，检查开发环境。

方法二（推荐使用该方式）

$ flutter doctor

如果出现下面这样的页面,表示你Flutter还没下载,正在下载Flutter,文章上面的下载可以理解为是安装工具,现在才是正式安装:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Downloading Dart SDK from Flutter engine 52c7a1e849a170be4b2b2fe34142ca2c0a6fea1f...
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                             Dload  Upload   Total   Spent    Left  Speed
100  120M  100  120M    0     0  9310k      0  0:00:13  0:00:13 --:--:-- 10.3M

下载完成之后，就会开始安装:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Downloading Dart SDK from Flutter engine 52c7a1e849a170be4b2b2fe34142ca2c0a6fea1f...
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                             Dload  Upload   Total   Spent    Left  Speed
100  120M  100  120M    0     0  9310k      0  0:00:13  0:00:13 --:--:-- 10.3M
Building flutter tool...

╔════════════════════════════════════════════════════════════════════════════╗
║                 Welcome to Flutter! - https://flutter.dev                  ║
║                                                                            ║
║ The Flutter tool anonymously reports feature usage statistics and crash    ║
║ reports to Google in order to help Google contribute improvements to       ║
║ Flutter over time.                                                         ║
║                                                                            ║
║ Read about data we send with crash reports:                                ║
║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
║                                                                            ║
║ See Google's privacy policy:                                               ║
║ https://www.google.com/intl/en/policies/privacy/                           ║
║                                                                            ║
║ Use "flutter config --no-analytics" to disable analytics and crash         ║
║ reporting.                                                                 ║
╚════════════════════════════════════════════════════════════════════════════╝

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Material fonts...                                       1.1s
Downloading android-arm-profile/darwin-x64 tools...                 0.7s
Downloading xxx
......

安装完成之后,就会继续执行上面因为下载中断的 $ flutter doctor 命令, 打印检查结果:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E227, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
  Install Android Studio from: https://developer.android.com/studio/index.html
  On first launch it will assist you in installing the Android SDK components.
  (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
  If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
  You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
    brew update
    brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ Brew can be used to install tools for iOS device development.
  Download brew at https://brew.sh/.
[!] Android Studio (not installed)
[!] VS Code (version 1.34.0)
✗ Flutter extension not installed; install from
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available

! Doctor found issues in 5 categories.

你应该可以读出上面的检测结果(或者找翻译)，有很多条目都没有通过。需要我们安装检测结果一条条进行安装，直到满足开发环境。（如果有[!]x标志，表示本行检测没有通过，就需要我们设置或者安装相应的软件了。）

有可能你的Android studio也没有安装，那么你要先安装这个编辑器，
安装好后，可以顺便下载Android SDK。打开 Android studio 就会自己弹出来安装 Android SDK，你只需要保证网络能下载就行了。另外MAC自带 java jdk,所以也不需要在另外下载了。
下载Android SDK的时候，记得开VPN，否则你会等到天荒地老。

Android Studio下载地址，下面两个都行：
MAC版官网下载地址
集合各平台版本下载

1、允许协议（android-licenses）

安装完成 Android Studio 和 Android SDK 之后，下面要做的就是允许协议（android-licenses）运行命令:

$ flutter doctor --android-licenses

然后让你输入Y/N的时候，一直输入Y就行了。输入N会失败，不要在挑战了。

如果出现下面错误，说明你的SDK版本不行，跑一下它给出的命令(建议开VPN,没有VPN也直接运行试试吧)。

A newer version of the Android SDK is required. To update, run:
/Users/xxx/Downloads/android-sdk/tools/bin/sdkmanager --update

执行上面命令更新，可能会报错如下:

Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:582)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:190)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:499)
... 5 more

我是没有遇到上面这个错误，但是有人遇到了我就顺便记录进来了。如果真遇到了请保证你的java版本大于或等于1.8（java8）就可以了，可以去官网下载。

更新好之后重新运行协议命令。

完成之后再次输入 $ flutter doctor 进行检查看还有什么需要支持的

$ flutter doctor

输入如下:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E227, locale
zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install with
  Brew, run:
    brew update
    brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ Brew can be used to install tools for iOS device development.
  Download brew at https://brew.sh/.
[!] Android Studio (version 3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.34.0)
✗ Flutter extension not installed; install from
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available

我发现上一个 [✗] Android toolchain - develop for Android devices 的 问题已经好了。

那么接着在来处理 [!] iOS toolchain - develop for iOS devices (Xcode 10.1) 问题。
这里呢，我们需要用到MAC的 Homerew，我这里也写了Homerew安装方式 超级简单。

安装好 Homerew 之后,根据问题中的提示运行 brew xxx 命令，因为Flutter需要用到这些资源库。
这里呢我把这一步需要解决的问题单独拷贝出来,方便观看:

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install with
Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
✗ Brew can be used to install tools for iOS device development.
Download brew at https://brew.sh/.

当我在运行

$ brew install --HEAD usbmuxd

出现

Error: Your Xcode (10.1) is too outdated.
Please update to Xcode 10.2.1 (or delete it).
Xcode can be updated from the App Store.

这个就自己看看或者翻译一下就知道了，当前的 Xcode (10.1) 版本低了,需要更新到 10.2.1或者更高。如果你没有安装Xcode需要去下载安装 需要登录苹果账号进入下载列表。

更新好xcode之后，继续运行下面的 brew 命令。
其他的错误我就不一一列出来了，不知道的可以直接百度,或者翻译看看就明白怎么弄了。

接下来这个错误,只需要在 Android Studio 上面装上 Flutter 插件，以及支持下 Dart 环境。

[!] Android Studio (version 3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

打开 Android Studio

安装过程中会询问你是否要安装 Dart，点YES就行了，安装完成之后需要重启 Android Studio 才会生效。

另外提示一下 在使用 Android Studio 进行 New 一个 Flutter 项目的时候会卡主一段时间，我这边是卡了挺久了,点击 Start a new Flutter project 就卡主不动了, 重启了 Android Studio 几次，后面等了一段时间才可以。

另外需要使用 Android Studio 的模拟器，可以自行百度 Android Studio 怎么添加模拟器。

再次输入 $ flutter doctor 进行检查看还有什么需要支持的

$ flutter doctor

输出

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E227, locale
zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.4)
[!] VS Code (version 1.34.0)
✗ Flutter extension not installed; install from
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

看到没,只有一个 VS Code 的错误没有打勾了 Nice!

对于这个错误, 其实也是说VSCode需要支持 Flutter 插件 跟 Dart 插件，我们打开VSCode这样操作：

我们只需要搜索flutter install 就好了，而且安装了flutter 则会默认一块安装了 Dart , 但是它依然会右下角弹出提示框。关了就可以了，或者你不放心可以在上面在搜索 Dart ，你就会看到它也是属于已安装的状态。

最后我们再次输入 $ flutter doctor 检查

$ flutter doctor

输出

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E227, locale
zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.34.0)
[✓] Connected device (1 available)

• No issues found!

恭喜，到此为止，我们的环境就搭建完毕了！
在VSCode上面使用模拟器或者真机都是比较方便的。

---

其他参考地址
Flutter MAC VSCode 常用快捷键和命令行, 模拟器操作命令
通过命令行创建Flutter项目(包含VSCode方式)