【原创】MacOS 搭建 Flutter 开发环境(二)

前言

1、概要

前面只安装好了 Flutter 命令行工具,但可以看到还有很多不满足的项,本文分享如何就绪相关环境。

2、相关环境

  • MacOS 10.15.7
  • Flutter 1.24-candidate.11
  • Dart 2.12.0
  • Android Studio 4.1.1
  • VS Code 1.51.1
  • IDEA 2020.2.3

3、注意事项

前面 5 步都是使用 flutter 当前的 stable (1.22.3) 版本的,从第 6 步安装 Android Studio 的 flutter 插件开始由于 flutter 1.22.3 与 Android Studio 4.1 以后版本的适配问题,所以解决方法是更新了 flutter 的版本。

配置过程

1、使用 flutter doctor 检查当前环境

flutter 贴心地为开发者提供了一个命令用来检测你当前的 flutter 环境是否已经就绪。可以执行如下命令来检测你的 flutter 开发环境

flutter doctor

如下示例:

从上面的截图中可以看到没有安装 Xcode,没有安装 Android Studio,也没有安装 Android SDK…

这是因为我是在虚拟机上演示的,虚拟机没安装 Xcode,毕竟比较占空间。如果你也刚好提示没有安装 Xcode,那么直接从 App Store 中搜索 Xcode 下载吧,完全下载并安装。

2、安装 Xcode

从 MacOS 的 App Store 中下载安装最新版本即可,此步骤略过,如果已经安装了 Xcode,可跳过此步骤。

3、安装 Android Studio 

安装 Android Studio 开发工具,Android Studio 是 Google 与 Jetbrains 合作推荐的针对 Android 开发的免费的 IDE 产品,请从 Android Studio 官网下载并安装。

如果已经安装 Android Studio 则可以跳过此步骤。

4、安装 Android SDK

Android SDK(Software Development Kit) 是用于 Android 软件开发的工具包,主要提供用于 Android 开发的接口/API,系统库等等。

不同的 Android 大版本对应不同的 SDK 包。这个也好理解,不同版本功能不同,所以接口不同,工具包也不同。

安装方法如下,打开 Android Studio

点击 Configure -> SDK Manager

勾选需要安装的版本,然后点击 Apply

4、安装好后再执行 flutter doctor,发现输出信息已经变了。

flutter doctor   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.3, on Mac OS X 10.15.7 19H2, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2020.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.51.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.

5、同意 Android licenses

按第上一步中的 flutter doctor 的输出信息,需要同意 Android licenses,已经给出了命令

$ flutter doctor --android-licenses
Warning: File /Users/jiangzhuolin/.android/repositories.cfg could not be loaded.
6 of 7 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)?y
...
14.7 This License Agreement, and your relationship with Google under this License Agreement, shall be governed by the laws of the State of California without regard to its conflict of laws provisions. You and Google agree to submit to the exclusive jurisdiction of the courts located within the county of Santa Clara, California to resolve any legal matter arising from this License Agreement. Notwithstanding this, you agree that Google shall still be allowed to apply for injunctive remedies (or an equivalent type of urgent legal relief) in any jurisdiction.
---
August 15, 2011
---------------------------------------
Accept? (y/N):y
...
10.8 Open Source Software. In the event Open Source software is included with Evaluation Software, such Open Source software is licensed pursuant to the applicable Open Source software license agreement identified in the Open Source software comments in the applicable source code file(s) and/or file header as indicated in the Evaluation Software. Additional detail may be available (where applicable) in the accompanying on-line documentation. With respect to the Open Source software, nothing in this Agreement limits any rights under, or grants rights that supersede, the terms of any applicable Open Source software license agreement.
---------------------------------------
Accept? (y/N): y
All SDK package licenses accepted

全部填 y 然后回车就行了

6、安装 Android Studio 的 Flutter 与 Dart 插件

flutter doctor                    
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.3, on Mac OS X 10.15.7 19H2, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2020.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.51.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 4 categories.

点击 Marketplace -> 输入 Flutter 搜索,第一项就是直接安装

很遗憾的发现,这个 Marketplace 必须要使用代理才能访问~ 如果没有科学上网,可以下载离线的包安装~

设置代理的方法

屏幕录制2020-11-12 03.53.09.mov

安装 Flutter 插件会要求同时安装 Dart 插件,点击 Install

安装完成后,Restart IDE

重启后,能看见 “Create New Flutter Project” 表示插件安装成功。

如果安装完成后仍然显示没安装,是因为 Android Studio 在 4.1 版本以后插件安装位置发生了变化,而 Flutter 在 1.24 版本才适配该变化。

具体解决方法请参考另一篇文章:【原创】MacOS flutter doctor 检测不到 Android Studio 4.1 的插件

7、安装 AVD

AVD 就是 Android Virtual Device,就是虚拟 Android 环境,用于开发调试,如果有真机,直接将真机接入电脑也可以。

以下是从 Android Studio 主界面管理 AVD 的示例,如果你在项目开发中,也可以在项目开发窗口的右上角找到 AVD Manager 的图标。

示例:

从 Android Studio 的主界面 -> Configure -> AVD Manager

AVD Manager 的窗口,在该窗口可以看见已经创建的 AVD 设备,也可以点击左下角的 “Create Virtual Device…” 新建

选择 Phone -> 选择一个虚拟设备的型号,比如 Pixel XL,点击 Next

选择一个 Android 的镜像(SDK 版本,后面有对面的 Android 大版本),如 Android 10.0

配置 AVD,基本只需要配置一个名字就行了,为了自己方便记忆不能与其他 AVD 设备重复。点击 Finish

然后就能看见刚创建的 AVD 设备了,只需要点击后面的小三角便可以运行 AVD 设备

运行效果如下:

8、IDEA 安装 Flutter 插件(可选)

如果你需要使用 IDEA 来开发 Flutter 应用,请安装 IDEA 的 flutter 与 dart 插件。否则,直接跳过此项。

IDEA 安装 flutter 插件几乎与 Android Studio 安装 flutter 插件一模一样,在此不做过多赘述了。

9、VS Code 安装 flutter、dart 插件(可选)

如果你安装有 Visual Studio Code 软件,flutter doctor 也行检测你的 VS Code 是否安装了 flutter 插件。

如果你没安装 VS Code 或者你不需要使用 VS Code 来开发 flutter 应用,那么你可以不用安装 VS Code 的 flutter 插件,也就是此项不用管它。

如果你需要用 VS Code 或者有强迫症,安装也非常简单。

打开 VS Code -> 左下角设置图标 -> Extensions -> 搜索 flutter 并安装

注:安装 flutter 插件会自动安装 dart 插件,但是卸载 flutter 并不会自动卸载 dart 插件,而且必须先卸载 flutter 才能再卸载 dart 插件。

总结

上面列举的步骤相当的多,有 9 个步骤,一般来说并不需要这么多。比如,一般使用 Android Studio 或者 VS Code 来开发,那么你就只需要安装你用来开发 Flutter 的那个工具的 flutter 插件即可。

另外,不同环境的情况不尽相同,请根据 flutter doctor 提示的信息进行调整即可。所有完成后的环境如下所示:

You may also like...

发表评论

电子邮件地址不会被公开。