安装准备

1、简介

Flutter 是 Google 开源的一款主要用于构建统一的移动应用的 UI 框架。

虽然早期的 flutter 主要是为了统一与整合 IOS 与 Android 的界面开发，但随着 flutter 的发展，现在它不止能构建移动应用，比如 IOS，Android，同样也可以构建 MacOS，Windows，Linux，Web 的应用程序。

使用 Flutter 能够构建出与原生应用的体验基本相同的应用程序，而不像有些所谓的跨平台需要在系统与应用之前再架设一层虚拟机或者转换器。

另外，flutter 还支持混合开发，就是可以与你用其他语言如 Java，Python，Go 等语言开发的代码结合，可谓是极大地方便了跨平台应用的开发。也让越来越多的人有能力构建出完全符合自己想法的应用。

本文主要介绍了 Flutter 在 MacOS 上的环境搭建，如果你也想学习一下前端的最新潮的技术，可以赶紧开始了！

2、安装环境

• MacOS 10.15.7

• Flutter stable 1.22.3

• Dart 2.10.3

• Homebrew 2.5.1

• git 2.24.3

• Android Studio 4.1.1

安装步骤

1、方法一：使用 brew cask 安装

(1) brew cask 安装

brew update -v; brew cask install flutter

示例：

$ brew update -v; brew cask install flutter
Checking if we need to fetch /usr/local/Homebrew...
Checking if we need to fetch /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask...
Fetching /usr/local/Homebrew...
Checking if we need to fetch /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core...
Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask...
Checking if we need to fetch /usr/local/Homebrew/Library/Taps/homebrew/homebrew-services...
Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core...
Updating /usr/local/Homebrew...
Branch 'master' set up to track remote branch 'master' from 'origin'.
Switched to and reset branch 'master'
Your branch is up to date with 'origin/master'.
Switched to and reset branch 'stable'
Current branch stable is up to date.
...
Already up-to-date.
...
==> Downloading https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_1.22.3-stable.zip
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'flutter'.
==> Installing Cask flutter
==> Linking Binary 'dart' to '/usr/local/bin/dart'.
==> Linking Binary 'flutter' to '/usr/local/bin/flutter'.
🍺  flutter was successfully installed!

(2) 使用如下命令查看 flutter 的当前版本

flutter --version

示例：

$ flutter --version
Flutter 1.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8874f21e79 (12 days ago) • 2020-10-29 14:14:35 -0700
Engine • revision a1440ca392
Tools • Dart 2.10.3

注：

• 此方法安装与升级维护相对简单，但需要从 Google 的站点下载 flutter，所以此方法需要你有科学上网，如果你没有科学上网可以使用方法二进行安装。

• brew cask 安装 flutter 后自动将 dart 与 flutter 脚本链接到了 /usr/local/bin 目录下，所以不用再设置环境变量（/usr/local/bin 默认就在 PATH 中）。

2、方法二、下载源码/源码包安装

这种方法也是官方文档中推荐的方法。参考：https://flutter.cn/docs/get-started/install/macos

(1) 克隆源码到本地

执行如下命令将 flutter 的稳定版的源码克隆到本地

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

示例：

$ pwd
/Users/jiangzhuolin
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1
Cloning into 'flutter'...
remote: Enumerating objects: 4899, done.
remote: Counting objects: 100% (4899/4899), done.
remote: Compressing objects: 100% (3672/3672), done.
remote: Total 4899 (delta 1051), reused 2149 (delta 811), pack-reused 0
Receiving objects: 100% (4899/4899), 7.89 MiB | 621.00 KiB/s, done.
Resolving deltas: 100% (1051/1051), done.

(2) 配置 flutter 环境变量

接 (1)，在 (1) 完成后，直接在命令行执行如下命令将 flutter 的 bin 目录添加到 PATH 路径中，这样就能在任意位置运行 flutter 命令了。

$ echo export PATH='$PATH':$PWD/flutter/bin >> ~/.bash_profile

注：

• $PWD 在这里是一个环境变量，表示的是执行当前命令时所在的目录的绝对路径。

• $PATH 表示的是系统的可执行命令搜索路径，~ 表示用户家目录，.bash_profile 表示的是 bash shell 的环境变量，如果不存在会自动创建。

• 如果使用的是 zsh，可以使用 echo export PATH='$PATH':$PWD/flutter/bin >> ~/.zshrc

(3) 使配置生效

执行了上面的步骤，我们还是不能在命令行运行 flutter 命令，这是因为我们把配置写入了配置文件，但它却没生效。.bash_profile 默认是在创建 ssh session 的时候会自动加载。

$ flutter --version
zsh: command not found: flutter

所以，这里我们使用如下命令手动加载使其生效

$ source ~/.bash_profile

至此，安装基本结束了！

(4)、你以为真的结束了？配置 flutter 镜像

正所谓万事开头难，结尾难，中间难... 你以为做完上面的步骤就万事大吉了？当你兴高采烈地运行 flutter 命令时，你非常可能得到的是类似如下的错误信息（科学上网除外）

$ flutter --version
Downloading Dart SDK from Flutter engine a1440ca392ca23e874a105c5f3248b495bd0e247...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:49 --:--:--     0
curl: (56) LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
#
Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/a1440ca392ca23e874a105c5f3248b495bd0e247/dart-sdk-darwin-x64.zip
If you're located in China, please see this page: https://flutter.dev/community/china

这是国内开发者们天生就需要多走的一步，不过好在 flutter 贴心的告诉你，如果你在中国... 请看看 https://flutter.dev/community/china

依据官方文档，配置 flutter 镜像的环境变量

echo "export PUB_HOSTED_URL=https://pub.flutter-io.cn" >> ~/.bash_profile
echo "export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn" >> ~/.bash_profile

注：

• 这里使用的是 flutter 的中国社区镜像，也可以使用其他镜像，比如：

上海交大镜像

FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn

清华大学 TUNA 协会镜像

FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub

使其生效

source ~/.bash_profile

• 如果你使用的是其他 shell，如 zsh 则可以如下设置，同样需要 source 使其生效

echo "export PUB_HOSTED_URL=https://pub.flutter-io.cn" >> ~/.zshrc
echo "export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn" >> ~/.zshrc

(5) 大功告成

最后再执行 flutter --version 命令，可以看到这下才是真正的安装成功了。

$ flutter --version
Downloading Dart SDK from Flutter engine a1440ca392ca23e874a105c5f3248b495bd0e247...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  172M  100  172M    0     0  26.0M      0  0:00:06  0:00:06 --:--:-- 26.9M
Building flutter tool...
Flutter 1.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8874f21e79 (13 days ago) • 2020-10-29 14:14:35 -0700
Engine • revision a1440ca392
Tools • Dart 2.10.3
...
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝

运行验证

1、安装校验

(1) 使用如下命令查看 flutter 的当前版本

flutter --version

示例：

$ flutter --version
Flutter 1.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8874f21e79 (12 days ago) • 2020-10-29 14:14:35 -0700
Engine • revision a1440ca392
Tools • Dart 2.10.3

(2) 使用如下命令查看 dart 的当前版本

dart --version

示例：

$ dart --version                                  
Dart SDK version: 2.10.3 (stable) (Tue Oct 27 14:44:30 2020 +0100) on "macos_x64"

2、flutter doctor 校验开发环境

安装好了 flutter 之后并不意味着也完成了，你还需要其他的与开发相关的工作，比如安装 iOS 相关的工具和 Android Studio 的 Flutter 插件。

可以看到下面显示 X 的项都是还未就绪的项，Google 的产品用起来就是麻烦就完事了... 

$ 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)
    ✗ Xcode requires additional components to be installed in order to run.
      Launch Xcode and install additional required components when prompted or run:
        sudo xcodebuild -runFirstLaunch
[!] 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 6 categories.

关于 Flutter 开发环境相关的准备将在另外的文章中分享，不然该文章将越写越长...影响阅读体验了！！！

附录

flutter 官网：

https://flutter.dev/

flutter 官方文档地址：

https://flutter.dev/docs

flutter github 地址：

https://github.com/flutter/flutter

flutter 中文官网

https://flutter.cn/

flutter 中文安装文档

https://flutter.cn/docs/get-started/install/macos

https://flutter.dev/community/china