Flutter開發實戰--開發環境搭建

開發環境：macOS

一、設置環境變量

打開終端，而後打開環境變量配置文件，若是不加sudo可能沒有權限

sudo vi ~/.bash_profile
複製代碼

編輯完以後，按ESC鍵，輸入:wq保存退出，若是不想保存就輸入:q

二、獲取Flutter SDK

SDK下載頁
下載完成後將其解壓到你想安裝的目錄。

建立安裝目錄
mkdir Programfiles

進入該目錄
cd ~/Programfiles

解壓flutter安裝包
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.3-stable.zip
複製代碼

本文安裝目錄爲/Users/shanggushenpeng/Programfiles

三、添加flutter相關工具到path中

官方文檔中給咱們了一種臨時設置path的方法就是

export PATH=`pwd`/flutter/bin:$PATH
複製代碼

上面代碼只能暫時針對當前命令行窗口設置PATH環境變量，要想永久將Flutter添加到PATH中,須要修改 .bash_profile 文件

重啓終端或者執行source $HOME/.bash_profile刷新當前終端窗口。

四、運行flutter doctor

運行如下命令查看是否須要安裝其它依賴項來完成安裝

flutter doctor
複製代碼

該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能須要安裝的其餘軟件或進一步須要執行的任務。

下面是我運行上述命令後輸出結果的截圖。

圖片中信息提示電腦尚未安裝Android SDK、Xcode以及iOS工具。

ps: 本人是一名前端程序員，因此電腦中沒有配置過客戶端開發相關工具。

前後安裝Android studio和Xcode以後再次執行flutter doctor命令，獲得下面輸出信息。

根據提示的錯誤信息，執行下面命令：

flutter doctor --android-licenses
複製代碼

根據提示一直輸入y便可。再次執行flutter doctor命令，獲得下面輸出信息。

如今還提示咱們Xcode沒有安裝成功，須要咱們執行下面命令。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
複製代碼

執行上面命令後獲得下面錯誤：

xcode-select: error: invalid developer directory '/Applications/Xcode.app/Contents/Developer'
複製代碼

出現這個錯誤是由於第一次安裝Xcode是從蘋果官網下載的安裝包，網上有人遇到一樣問題，有兩種解決方法（推薦第二種）：

一、在APP Store中從新安裝一次Xcode。（比較low）
二、將安裝好的Xcode移動的應用程序裏面，而後再次執行上面命令。（若是是Xcode-beta版本要重命名爲Xcode）。

關於IOS tool的相關錯誤則根據提示一次執行下面命令：

brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
    brew install ios-deploy
複製代碼

再次執行flutter doctor命令，獲得下面輸出信息。

根據提示須要在Android Studio安裝兩個插件:

• Flutter插件： 支持Flutter開發工做流 (運行、調試、熱重載等).
• Dart插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等)

安裝方法
一、啓動Android Studio.
二、打開插件首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
三、選擇 Browse repositories…, 選擇 Flutter 插件並點擊 install.
四、重啓Android Studio後插件生效.

再次執行flutter doctor命令，獲得下面輸出信息。

如今咱們flutter開發環境已經所有搭建完成。

參考文章

Flutter中文網
Mac Flutter 環境安裝
在macOS上搭建Flutter開發環境~踩坑記錄