009.jpg

雖然網(wǎng)上有很多關(guān)于Flutter開發(fā)環(huán)境配置的，但是感覺在安裝過程，總是會(huì)遇到一些別人遇不到的問題，這里做個(gè)簡單的總結(jié)

系統(tǒng)環(huán)境要求

• MacOS （64-bit）
• 磁盤空間：大于3G
• 命令號(hào)工具：bash、mkdir、rm、git、curl、unzip、which、brew 這些命令在都可以使用

在配置環(huán)境前，可能會(huì)遇到一些坑，我自己兩個(gè)電腦，再加上工作電腦，所以一共配置了3次環(huán)境，遇到了各種各樣的坑，這里先說下配置前遇到的坑。

ls vi 等命令 command not found
原因是因?yàn)榄h(huán)境變量的問題，編輯profile文件沒有寫正確，導(dǎo)致在命令行下 ls等命令不能夠識(shí)別。
解決辦法：在命令行下打入下面這段就可以了
export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin

brew命令的坑，很多mac系統(tǒng)都沒有安裝這個(gè)
學(xué)習(xí)安裝brew：https://segmentfault.com/a/1190000013317511

使用oh-my-zsh 安裝配置終端
當(dāng)然這里只是一個(gè)建議，后面用到一些命令，單詞較長，配置完成后，有利于我們更加快速的完成配置，而且終端的使用也會(huì)變得極其方便，喜歡嘗試的朋友們可以去配置一下oh-my-zsh配置

下載Flutter SDK包

直接去官網(wǎng)下載，建議掛梯子

進(jìn)去后直接點(diǎn)擊下載就好了

image

配置環(huán)境變量

下載好以后，把下載的文件夾放進(jìn)一個(gè)目錄下，這個(gè)目錄要記住，后面配置環(huán)境變量時(shí)，要用到。
比如：/Users/用戶名/Desktop/Flutter/flutter，這里的Flutter就是我新建的文件夾，下載的文件flutter我就是放在該目錄下

打開終端，進(jìn)入到上面所說的目錄，使用vim進(jìn)行配置環(huán)境變量，命令如下

vim ~/.bash_profile

在打開的文件里增加一行代碼，意思是配置flutter命令在任何地方都可以使用。

export PATH=/Users/用戶名/Desktop/Flutter/flutter/bin:$PATH

這里的是根據(jù)你放置下載文件的路徑來寫的，所以自己要清楚路徑才行。如果不能使用梯子的還需要在環(huán)境變量里配置一下Pub源，不然無法使用，可以直接接著下面增加兩行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

配置完成后，需要使用source命令重新加載一下，具體如下：

source ~/.bash_profile

進(jìn)行到這步，就算flutter安裝工作完成了，但是還是不能進(jìn)行開發(fā)?？梢允褂妹顏頇z測一下，是否安裝成功了。

flutter -h

出現(xiàn)下面結(jié)果，說明到目前為止是一切順利的。

image

這里我們可能會(huì)遇到一個(gè)問題，就是提示zsh: command not found: flutter
這說明我們上面配置flutter命令沒有成功，檢測一下路徑是否有問題，可以cd到/Users/用戶名/Desktop/Flutter/flutter目錄下，使用flutter -h，查看運(yùn)行結(jié)果，如果失敗，就檢測一下路徑。

如果上面路徑下提示成功，在其他路徑下提示不成功，那么進(jìn)行下面命令：

vim ~/.zshrc

在打開的文件里最下面增加一行代碼，就是配置的路徑

export PATH=/Users/用戶名/Desktop/Flutter/flutter/bin:$PATH

保存退出后，再使用source命令重新加載一下：

source ~/.zshrc

到這里，應(yīng)該可是在任何路徑下使用flutter命令了。

檢查開發(fā)環(huán)境

到上面為止，我們只是安裝好了Flutter，但是還不具備開發(fā)環(huán)境，使用Flutter命令進(jìn)行檢查：

flutter doctor
http://jspang.com/static/upload/20181031/hWspWXNesCVAZYZV0Z2iSdhb.png

image

仔細(xì)看上面的說明，我們需要一條一條的安裝，知道滿足開發(fā)環(huán)境。
這里可以先直接下載Xcode，Android Studio，VSCode這三個(gè)軟件。
Xcode直接在App Store里下載
Android Studio下載地址：http://www.android-studio.org
VSCode下載可直接百度，網(wǎng)上有很多鏈接提供。（這里不是必須的，可下載可不下載，配置環(huán)境的時(shí)候不要求，開發(fā)時(shí)可用，畢竟輕量級(jí)）

下載Android Studio的時(shí)候，記得搭上梯子，不然可能。。。（你懂得??）

如果Android Studio有安裝的，那么第一步要做的就是允許協(xié)議（android-licenses），終端輸入以下命令：

flutter doctor --android-licenses

然后后面會(huì)讓你輸入y/n的時(shí)候，一路y下去就行了。

完成后，再次使用flutter doctor進(jìn)行檢查，如下：

image

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

這里每輸入完一個(gè)，都需要等待一會(huì)，比較耗時(shí)，中間也有可能遇到其他情況，可以根據(jù)他的提示輸入其他命令；如果在某一步卡主，可以重啟終端，直接接著上一步輸入命令就行（這里就遇到這個(gè)坑，以為是網(wǎng)速問題，卡在updating的一步，半天不動(dòng)，重啟一下，一會(huì)就過）

到這步了，如果有下面提示，說明我們的Android Studio需要安裝一下Flutter插件：

image

使用command + ‘,’ 打開窗口，如下：

image

image

安裝完成后，重啟一下Android Studio就行。

如果出現(xiàn)

image

沒有什么問題，因?yàn)槲覀冃枰B接一個(gè)調(diào)試設(shè)備，所以才出現(xiàn)這個(gè)問題，連接手機(jī)，或者打開Xcode里的模擬器就解決了。

到這里，開發(fā)環(huán)境就配置完成了。這里比較麻煩，但是能征服這些問題也是很有成就感覺，而且后期在研究Flutter開發(fā)的時(shí)候，發(fā)現(xiàn)這點(diǎn)麻煩是值得的。

參考鏈接：技術(shù)胖的博客