Flutter初体验-安装

多端融合能力是现在大前端研究的技术风向标之一，当前 Flutter 风头正盛，它的设计之初就是为了解决移动端的当今的诸多问题。

Flutter 的设计的思想以及出发点不是本篇的重点，所以直奔主题，如何在 Mac 上安装 Flutter 的开发环境。

1. Homebrew

Homebrew 是 Mac 是安装各种软件包的一个工具，所以你需要先安装好 Homebrew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 安装 Flutter SDK

下载 SDK

SDK 下载方式有2种。一是使用 git clone -b beta https://github.com/flutter/flutter.git 下载，二是通过官网选择符合自己机器环境的文件。（实验后发现方式一特别慢，建议大家直接使用方式二）

下载好之后解压，安装到自己指定的位置。

配置环境变量

Flutter 在运行的时候需要去官网下载一些需要的资源，所以需要设置镜像服务器。我使用的是 iterm2。所以打开 .zshrc 文件。如果使用的是系统的 Terminal，则需要打开 .bash_profile。

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

/Users/liubinpeng 是我电脑环境下的 Flutter 路径，这里改成你自己的路径。之后执行 source .zshrc。

验证 Flutter 环境是否成功。

flutter -h

3. 配置 Android studio

一般认为用户是 iOS 开发，电脑没有 Android 开发环境，首先去官网下载。

然后通过 flutter doctor 来检查 flutter 的环境配置。一般可以看到多个 ✗ 。每个 ✗ 后面的描述内容都是我们需要解决的问题。

打开 Android studio。但是首次打开会报错，提示找不到 SDK。解决方案：在应用程序文件夹下面找到 Android studio，显示包内容。路径如下

/Applications/Android\ Studio.app/Contents/bin/idea.properties，用文本编辑器打开，在最下面添加如下代码

isable.android.first.run=true

设置 Android studio 的环境变量。

export ANDROID_HOME=~/Library/Android/sdk 
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

分别是安卓 SDK 路径、安卓模拟器路径、安卓 tools 路径、安卓平台工具。

安装 Android studio Flutter 插件接下来使用 flutter doctor 检查，显示信息

 ✗ Flutter plugin not installed; this adds Flutter specific functionality.
 ✗ Dart plugin not installed; this adds Dart specific functionality.

意思是缺少 Flutter 插件。步骤：Preferences -> Plugins -> 搜索栏输入 Flutter，找到第一个点击 install。此时会弹出对话框让你选择安装 Dart，点击 YES。之后重启 Android studio，看到在主界面会多出下图红色框的内容。至此我们可以创建 Flutter 工程了。

给 Android studio 设置模拟器

点击右上方区域一个类似手机的按钮，选择手机（Pixel 2）.下载对应的系统（pie）(需要开启翻墙模式)。

配置 iOS 环境

前提安装好 Xcode 和选择好对应的模拟器。并执行下面的脚本

brew link pkg-config
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

配置 VSCode

安装好 VSCode，在插件的地方搜索 Flutter 和 Dart 对应的插件。

最后输入 flutter doctor 检测你的全部是否完毕，至此你可以展开 Flutter 之旅了。祝愉快

4.1 KiB Raw Blame History Unescape Escape