本節(jié)，主要記錄基于Mac系統(tǒng)的Flutter的環(huán)境搭建。主要根據(jù)官網(wǎng)介紹進(jìn)行搭建工作，搭建過程會(huì)有一些坑，而且有時(shí)需要采取科學(xué)上網(wǎng)的方式。
一. 安裝Flutter
1. 更新HomeBrew
- 如果你的電腦
已安裝這個(gè)工具包，升級(jí)它
brew update
- 如果電腦
未安裝這個(gè)工具包，按照官網(wǎng)指示安裝它
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. 下載Flutter
使用
科學(xué)上網(wǎng)方式
-
2.1 進(jìn)入 ?? 官網(wǎng) ，點(diǎn)擊
Get started：
image.png -
2.2 選擇對(duì)應(yīng)系統(tǒng)
image.png -
2.3 下載最新版本壓縮包
image.png
PS: 中文網(wǎng)地址為： https://flutter.cn/docs/get-started/install/macos
3. 配置環(huán)境變量
- 3.1 配置鏡像
Flutter運(yùn)行需要去官方下載所需資源，沒有梯子的伙伴需要鏡像服務(wù)器，以下是官方文檔?? 友情提示：
image.png
- 來到對(duì)應(yīng)的
Shell配置文件進(jìn)行配置：
- 如果你默認(rèn)使用
base，配置路徑為：~/.bash_profile- 如果使用
zsh，配置路徑為：~/.zshrc
-
配置內(nèi)容：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 3.2 配置環(huán)境
在Shell文件中繼續(xù)配置Flutter運(yùn)行環(huán)境（路徑中的xxx為自己的電腦用戶名）
export FLUTTER=/Users/xxx/iOSCoreMark/Flutter/flutter/bin
- 3.3 更新配置
使用source命令更新配置：
source .bash_profile
4. 指定運(yùn)行地址
我們運(yùn)行Flutter指令，需要先指定運(yùn)行地址。
-
方法一： 只在
當(dāng)前命令行窗口生效:
# 指定運(yùn)行地址(pwd是當(dāng)前文件夾路徑,需要指定你自己flutter文件夾的路徑)
export PATH="$PWD/flutter/bin:$PATH"
-
方法二：
永久生效：
參考官方指引(https://flutter.cn/docs/get-started/install/macos#update-your-path)
image.png -
運(yùn)行
flutter doctor，檢查運(yùn)行環(huán)境
image.png
PS： 第一行
Flutter配置成功即可，下面環(huán)境未配置成功，我們可以去不同開發(fā)工具中配置。
二、安裝Android Studio
- 直接去?? 官網(wǎng)下載最新版本的
Android Studio - 下載后
直接安裝即可。
1. 配置安卓環(huán)境變量
- 在對(duì)應(yīng)的
Shell配置文件中：
#Flutter (下面“pwd”請(qǐng)使用自己的路徑)
export FLUTTER=/Users/pwd/Flutter/flutter/bin
export PATH=FLUTTER:$PATH
#Flutter 鏡像設(shè)置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#安卓 (下面“username”請(qǐng)使用自己的用戶名)
export ANDROID_HOME=/Users/username/Library/Android/sdk
#安卓模擬器路徑
export PATH=${PATH}:${ANDROID_HOME}/emulator
#安卓tools路徑
export PATH=${PATH}:${ANDROID_HOME}/tools
#安卓平臺(tái)工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2. 安裝Android Studio插件
-
安裝完后，運(yùn)行
flutter doctor會(huì)發(fā)現(xiàn)缺少Flutter插件：
image.png -
來到Studio偏好設(shè)置，搜索并下載
Flutter和Dart插件：
image.png -
安裝完后，重啟
Android Studio，可以看到有Flutter 項(xiàng)目的創(chuàng)建方式了:
image.png
PS: 有一個(gè)坑點(diǎn)，如果
Flutter插件已安裝，但識(shí)別不到正確的android studio路徑，是因?yàn)?code>Android Studio路徑已改變，需要我們手動(dòng)指定下:flutter config --android-sdk /path/to/android/sdk flutter config --android-studio-dir /path/to/android/studio
- 此時(shí)再執(zhí)行
flutter doctor,會(huì)發(fā)現(xiàn)都搞定了。
image.png
3. 配置安卓模擬器
最新版本的包是
自動(dòng)配置了一個(gè)安卓模擬器，如果沒配置，我們可以手動(dòng)配置一下：-
3.1 打開
AndroidStudio，右上角找到模擬器管理:
image.png -
3.2 創(chuàng)建設(shè)備：
image.png -
3.3 選擇設(shè)備：
image.png -
3.4 選擇系統(tǒng)并下載
image.png
三、 Xcode和VSCode
- Xcode在Flutter最新版本中，是
自動(dòng)配置成功的 - VSCode,我們也只需要在
插件庫(kù)中手動(dòng)搜索和安裝Flutter插件即可
運(yùn)行flutter doctor，都是綠勾，就表示配置成功。
本節(jié)僅做一個(gè)環(huán)境搭建的簡(jiǎn)單記錄，其實(shí)官方文檔都講得非常詳細(xì)了。如果后續(xù)需要其他坑點(diǎn)，也會(huì)在本節(jié)進(jìn)行補(bǔ)充和記錄。
下一節(jié)，Flutter入門二：熟悉Widget、文字樣式、ListView
