mirror of
https://github.com/NohamR/knowledge-kit.git
synced 2026-05-24 20:00:37 +00:00
103 lines
4.1 KiB
Markdown
103 lines
4.1 KiB
Markdown
|
||
# Flutter初体验-安装
|
||
|
||
> 多端融合能力是现在大前端研究的技术风向标之一，当前 Flutter 风头正盛，它的设计之初就是为了解决移动端的当今的诸多问题。
|
||
|
||
|
||
Flutter 的设计的思想以及出发点不是本篇的重点，所以直奔主题，如何在 Mac 上安装 Flutter 的开发环境。
|
||
|
||
### 1. Homebrew
|
||
|
||
Homebrew 是 Mac 是安装各种软件包的一个工具，所以你需要先安装好 Homebrew。
|
||
|
||
```shell
|
||
/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**。
|
||
|
||
```shell
|
||
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 环境是否成功。
|
||
|
||
```shell
|
||
flutter -h
|
||
```
|
||
|
||
### 3. 配置 Android studio
|
||
|
||
一般认为用户是 iOS 开发，电脑没有 Android 开发环境，首先去[官网](https://developer.android.google.cn/studio)下载。
|
||
|
||
然后通过 `flutter doctor` 来检查 flutter 的环境配置。一般可以看到多个 ✗ 。每个 ✗ 后面的描述内容都是我们需要解决的问题。
|
||
|
||
- 打开 Android studio。但是首次打开会报错，提示找不到 SDK。解决方案：在应用程序文件夹下面找到 Android studio，显示包内容。路径如下
|
||
|
||
`/Applications/Android\ Studio.app/Contents/bin/idea.properties`，用文本编辑器打开，在最下面添加如下代码
|
||
|
||
```shell
|
||
isable.android.first.run=true
|
||
```
|
||
|
||
- 设置 Android studio 的环境变量。
|
||
```shell
|
||
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 检查，显示信息
|
||
|
||
```shell
|
||
✗ 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 和选择好对应的模拟器。并执行下面的脚本
|
||
|
||
```shell
|
||
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 之旅了。祝愉快
|
||
|
||
|