2024/01/28

引言

开发环境搭建是一个非常令人苦恼的过程，总会有一些莫名其名的问题出现。既然如此苦恼，不如找点乐子，将这个过程中涉及到的一些概念进一步研究，这样便可学到一些新知识，岂不美哉？本文以MacOS为例，介绍Flutter的安装过程。

SDK下载及环境变量设置

下载及安装

首先去官网下载最新的SDK：[下载链接] ，并根据电脑芯片架构下载最新版本的SDK压缩包到磁盘中。


接着切换到期望安装SDK的目录，本文将SDK安装到用户目录，命令过程如下：

1
2
3
4
5
6
7
8
# 切换到用户目录
cd ~
# 新建SDK目录
mkdir flutter_sdk
# 切换到SDK目录
cd flutter_sdk
# 解压SDK压缩包
unzip ~/Downloads/flutter_macos_arm64_3.16.9-stable.zip
环境变量设置

SDK已经安装到相应目录中，为了在任何目录下都能运行flutter命令，还需要将该目录添加到环境变量当中。

首先，我们需要知道当前使用的Shell发行版本，输入如下命令查看：

1
echo $SHELL
  • 若是zsh
    • 则打开~/.zshrc。
  • 诺是bash
    • 则打开~/.bash_profile

接着，在文件中追加并保存如下命令： 

1
export PATH=~/flutter_sdk/bin:$PATH

  • zsh用source ~/.zshrc刷新
  • bash用source ~/.bash_profile刷新

最后，输入echo $PATH命令查看是否有SDK目录。

如果已存在，在命令行任意目录中输入flutter doctor，可以出现如下界面：


该命令用于检测Flutter的配置环境存在的问题，诸君可根据它的提示去排查问题。

我们还可以进一步设置以下几个环境变量：

1
2
3
4
5
6
# 禁用代理
export NO_PROXY="127.0.0.1,localhost,*.example.com,::1"
# 国内镜像网站，用于下载pub上的依赖包
export PUB_HOSTED_URL=https://pub.flutter-io.cn
# 国内镜像网站，Flutter相关资源的网站
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

最后，你的.zshrc或./bash_profile文件中的内容应该像下图这样：


相关知识补充

Shell

在一开始，我们下载了SDK的压缩包，并在命令行通过cd、mkdir、unzip等命令完成了安装。

实际上，这个过程就是我们在与Shell（壳）进行交互的过程。Shell是一种应用程序，是用户和系统内核的沟通桥梁。下图很好地阐述了这种关系。


为什么需要用Shell？我个人认为是因为系统内核较为复杂，直接给普通用户使用的话不太现实，因此早期设计了一种基于文本命令的人机交互程序。随着技术的发展，像GNOME、KDE等图形界面其实也算是一种Shell（广义的），它们都是基于图形的人机交互程序。

我们一般常说的Shell，在狭义上是指基于文本命令的，如bash、zsh等。

还需要说明一点，Shell支持编程，也就是说会有变量、函数、条件语句、循环语句等功能，这极大地增强了用户使用Shell的灵活性。以下是一段Shell的脚本代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a=10
b=20
if [ $a == $b ]
then
   echo "a 等于 b"
elif [ $a -gt $b ]
then
   echo "a 大于 b"
elif [ $a -lt $b ]
then
   echo "a 小于 b"
else
   echo "没有符合的条件"
fi

bash vs zsh

Shell有很多发行版本，常见的有sh、bash、csh、tcsh、ash、dash、zsh等，各版本在功能、语法上都有可能不同，一般我们用的较多的是bash和zsh，因为：

  • bash是Linux的默认Shell
  • zsh是MacOS的默认Shell

环境变量

前面我们提到Shell支持编程，不得不聊聊编程中一个最基本的概念：变量作用域。

Shell的变量作用域有三种，分别为：

  • 局部变量
    • 只能在函数内部中使用，需要加local关键字，如local a=6
  • 全局变量
    • 在当前Shell进程中全局共享。不需要加任何关键字，如a=6
  • 环境变量
    • 当前Shell进程及其子进程都共享，需要加export关键字，如前文中提到的export PUB_HOSTED_URL=https://pub.flutter-io.cn。可以看出，它也是作用范围最大的。
    • 环境变量并非是永久的，关闭当前Shell进程（关闭命令行窗口）后这些变量就被销毁了。
    • 想要让环境变量持久化，需要将环境变量的定义写在.zshrc或./bash_profile中。zsh的Shell进程在启动时会执行.zshrc中的代码，bash的Shell进程在启动时会执行./bash_profile中的代码。
    • 写入环境变量到.zshrc或./bash_profile后并不会马上生效，可以重启Shell进程或用source filename命令重新加载这两个文件。
    • 最后再补充一个知识点，source命令是在当前进程中执行脚本文件，因此当前命令行也可以读到环境变量。而sh等命令会建一个子进程执行脚本文件，当前命令行窗口无法读取环境变量，这也是为什么我们写入环境变量到启动文件后都会用source命令的原因。

我们可以通过env查看当前Shell进程的所有环境变量。比较常用环境变量的是$PATH，它为Shell提供了可执行文件的搜索目录。

在前文中，我们设置了环境变量export PATH=~/flutter_sdk/bin:$PATH，就是为了追加SDK的可执行文件目录到$PATH中。当我们在命令行中输入flutter时，Shell会在$PATH提供的目录列表中搜索是否含有名为flutter的可执行文件，有则直接执行。

我们可以通过echo $PATH查看所有目录列表，可以看到SDK的目录已在其中了。


VSCode安装与配置

经典的轻量级编辑器，可用于Flutter的开发与调试。

从官网下载并安装完后，在扩展中搜索并安装Flutter插件。


安装完成后，中文用户在查看->命令面板搜索Flutter，选择Flutter: New Project即可新建项目。英文用户在View->Command Palette中执行相同的操作即可。

Xcode安装与配置

1.从App Store最新的Xcode版本。

2.配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer。

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

模拟器调试

安装完后，即可在VSCode进行调试，其中在模拟器中运行的方法如下图：


启动模拟器后再点击右上角的运行按钮。

真机调试

若想要进行真机调试，我们还需要安装：

  • homebrew，一种软件包管理器，你甚至可以用它安装Chrome浏览器。
  • libimobiledevice，一个允许开发者通过USB连接与iOS设备进行通信的库。
  • ideviceinstaller，基于libimobiledevice的一个工具，有安装ipa包、卸载应用等功能。
    • 例：安装应用ideviceinstaller -I app.ipa、卸载应用ideviceinstaller -U [bundleID]
  • ios-deploy，一个用于安装和调试iOS应用的命令行工具
  • cocoapods，一个用于管理iOS/MacOS项目中第三方依赖库的工具。

在命令行中输入如下命令即可安装homebrew（要注意网络环境）： 

1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
libimobiledevice、ideviceinstaller、ios-deploy、cocoapods用homebrew安装，命令如下：

1
2
3
4
5
brew update
brew install --HEAD libimobiledevice
# brew install 一次可安装多个软件包
brew install ideviceinstaller ios-deploy cocoapods
pod setup

完成上述设置后，还需在项目的iOS目录下找到Runner.xcworkspace，并在TARGETS>Runner>Signing & Capabilities中登录Apple开发者账户及Bundle Identifier。这些都做完后就可以选择真机并运行了！


Android Studio安装与配置

首先在官网下载并安装Android Studio：[下载地址]

安装完后，还需要安装Android Studio的命令行工具（未安装的话，flutter doctor会有警告提示），下图是安装步骤：


模拟器调试
首先需要在Android Studio中创建一个模拟器。点击右侧安卓手机按钮>点加号>选择一个模拟设备。


点击下一步后，还需要下载一个系统镜像。这里有各个版本的系统镜像（安卓14、安卓13、安卓12等），我们只要选择最近一个下载即可。


以上步骤都完成后，就可以在VSCode的设备列表中选择刚创建的模拟器了并运行了！


参考资料

Flutter实战 第二版