我想靜靜

首先必須吐槽一番，F(xiàn)lutter環(huán)境也是真惡心。換了最新的系統(tǒng)(無奈之舉)，因為裝Flutter需要下載最新版本的Xcode，而最新的Xcode需要系統(tǒng)是10.14.3或者以上版本才支持。為此統(tǒng)統(tǒng)換了個遍，心塞塞。

目錄
一、官網(wǎng)下載Flutter SDK
二、下載安裝Android Studio
三、下載安裝最新的Xcode
四、下載安裝VS Code
五、初次體驗 Flutter
六、更新 Flutter與回退 【2021.12.11 更新】
七、更新回退遇到的問題 【2021.12.11 更新】

一、 官網(wǎng)下載Flutter SDK

下載最新即可，我下載的是v1.3.8版本的。注意這里是需要的翻墻的喲！?。?/p>

Flutter SDK.png

其次，解壓安裝包到你想安裝的目錄
例如：

flutter存放位置.png

緊接著終端執(zhí)行

export PATH=`pwd`/flutter/bin:$PATH

運行 flutter doctor,查看是否需要安裝其他依賴

flutter doctor

flutter doctor 檢測環(huán)境執(zhí)行結果如下

首次安裝flutter

號外號外由圖我們可以看到Flutter的版本是0.3.2的，系統(tǒng)版本是10.14.1的。由于Flutter版本過低導致后面出現(xiàn)了一個很是尷尬的問題，注意一定要在官網(wǎng)下載較新的SDK，否則后面出現(xiàn)一個比較尷的問題。后面會給出解釋~稍等片刻?。?！

doctor found issues in 4 categories().主要針對這4個問題進行對號入座。
第一個or 第三個：讓我們安裝Android Studio,并給出了安裝地址，我們只需要根據(jù)地址下載安裝即可，安裝之后在執(zhí)行flutter doctor第一個和第三個就顯示??
第二個：讓我們下載最新的Xcode,下載完之后執(zhí)行某些命令
第四個：沒有設備連接，這個忽悠不管

二、下載安裝Android Studio點我

三、下載安裝最新的Xcode

在AppStore下載或者更新到最新的Xcode即可，由于筆者的系統(tǒng)是10.14.1的，故將Android Studio,Xcode10.2下載完畢之后，并執(zhí)行相關命令(brew install --HEAD libimobiledevice、brew install ideviceinstaller、brew install ios-deploy)之后，則更新系統(tǒng)

系統(tǒng)更新完成之后

進入終端執(zhí)行

export PATH=`pwd`/flutter/bin:$PATH
flutter doctor

根據(jù)提示緊接著執(zhí)行

sudo xcode-select --switch /Applications/Xcode.app/Contents/Deveoper

之后執(zhí)行flutter doctor再次進行環(huán)境檢測。與此同時，并已經(jīng)下載安裝VS Code（Visual Studio Code安裝地址),但是注意前面顯示的是[!]

緊接著按照提示再次執(zhí)行，當執(zhí)行到了brew install --HEAD libimobiledevice,出現(xiàn)了下面的問題。

解決Flutter環(huán)境問題:Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10

意思大致是說：系統(tǒng)要求的libusbmuxd版本和所要安裝的版本不一致。

解決方式:

brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice

之后再次執(zhí)行flutter doctor

圖片.png

看到這里是不是很開心，以為就大功告成了。于是繼續(xù)走起

四、下載安裝VS Code

安裝VS Code地址點我

安裝Flutter插件

1、啟動 VS Code
2、調用 View>Command Palette…
3、輸入 install, 然后選擇 Extensions: Install Extension
4、在搜索框輸入 flutter, 在搜索結果列表中選擇 Flutter, 然后點擊 Install即可
5、重新啟動 VS Code

通過Flutter Doctor驗證您的設置

1、調用View>Command Palette…
2、輸入 doctor, 然后選擇 Flutter: Run Flutter Doctor
3、查看OUTPUT窗口中的輸出是否有問題

此時你可以看到跟使用終端執(zhí)行flutter doctor結果是一樣的

五、初次體驗 Flutter

*創(chuàng)建新的應用

1. 啟動 VS Code
2. 調用 View>Command Palette…
3. 輸入 flutter, 然后選擇Flutter: New Project
4. 輸入 Project 名稱 (如hello), 然后按回車鍵
5. 指定放置項目的位置，然后按藍色的確定按鈕
6. 等待項目創(chuàng)建繼續(xù)，并顯示main.dart文件
   *運行應用程序
   1.確保在VS Code的右下角選擇了目標設備
   
   圖片.png

注意：這里先將模擬器打開，否則就會出現(xiàn)

圖片.png

按F5 鍵或調用Debug>Start Debugging 等待應用程序啟動

然后尷尬的事情就發(fā)生了 —— 清理失敗

圖片.png

Launching lib/main.dart on iPhone 6s in debug mode...
Skipping compilation. Fingerprint match.
Xcode failed to clean
** CLEAN FAILED **
Error launching application on iPhone 6s.
Exited (sigterm)

然后就各種瞎忙活，瞎折騰。直接進入,你會發(fā)現(xiàn)不管是真機還是模擬器都是可以跑起來的，但是為啥使用VS Code不管是手機還是真機咋就跑不起來呢 ？？？

于是各種百度找資料，你會發(fā)現(xiàn)依然解決不了你的問題

答案揭曉

揭曉前面留下了的隱患，就是因為Flutter SDK版本導致的,因為之前直接百度在人家寫的文章里面下載的SDK，結果就這樣被坑了，???????? ，也不知道是在哪篇文章連接里面下載的v0.3.2版本，被坑大發(fā)了。。。。
最終跑到 官網(wǎng)下載 ，下載最新即可，解壓之后直接將之前的flutter替換即可。

大功告成，安裝完畢

圖片.png

體驗熱重載

Flutter 可以通過 熱重載（hot reload） 實現(xiàn)快速的開發(fā)周期，熱重載就是無需重啟應用程序就能實時加載修改后的代碼，并且不會丟失狀態(tài)（譯者語:如果是一個web開發(fā)者，那么可以認為這和webpack的熱重載是一樣的）。簡單的對代碼進行更改，然后告訴IDE或命令行工具你需要重新加載（點擊reload按鈕），你就會在你的設備或模擬器上看到更改。
1.打開文件lib/main.dart
2.將字符串You have pushed the button this many times:更改為哈哈哈哈,賊快。。

六、更新 Flutter與回退 【2021.12.11 更新】

1、flutter版本升級

2、flutter回退到指定版本

1、GitHub搜索flutter 點擊進入后，選擇tags

image.png

2、可以看到flutter SDK 的各個版本

image.png

3、cd進入到存放flutter sdk目錄

eg:

image.png

git reset --hard ffb2ece

4、 最后再執(zhí)行

flutter --version

七、更新回退遇到的問題 【2021.12.11 更新】

image.png

解決cmdline-tools component is missing

1、進入Android Studio添加SDK Tool對應所缺工具?？梢匀?code>Android Studio找到Preferences -> Android SDK 找到SDK Tool
2、勾選Android SDK Command-line Tools（latest）點擊一路OK下載完畢即可。
3、再次在終端Terminal或者iTerm輸入flutter doctor進行檢查。

image.png