Flutter是目前全世界最流行的一個跨平臺的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。
并且是Google的親兒子，也對于混合開發(fā)非常友好，最重要的是，他是完全免費(fèi)的，并且開源。
Flutter有什么優(yōu)點(diǎn)呢？官方也很明確的表達(dá)了三個點(diǎn):
1、快速開發(fā)；
2、富有表現(xiàn)力和靈活的UI；
3、原生性能。
首先，能夠進(jìn)行快速開發(fā)。得益于Flutter的熱重載特性，修改任意代碼后保存，模擬器上的應(yīng)用會立即更新，做到幾乎與前端發(fā)開一樣的便捷高效，并且還不會丟失狀態(tài)，什么意思呢，就是說，我們操作過的數(shù)據(jù)，滑動過的列表的位置，都不會重置，總之，非常高級就對了。
其次，靈活的UI搭建以及布局。Flutter已經(jīng)內(nèi)置了Material和iOS風(fēng)格的widget，客戶沒有特別的要求的話，搭建一個框架出來也就分分鐘的事，全部是widget進(jìn)行排列組合。
并且，布局方面也比蘋果的AutoLayout高級多了，直接拿來了前端的FlexBox布局，寫代碼的時候完全不用考慮去計(jì)算frame，也不用考慮多設(shè)備適配問題，非常的前衛(wèi)。
最后，F(xiàn)lutter可以達(dá)到與原生應(yīng)用幾乎一樣的性能，所以，最最影響用戶體驗(yàn)的性能問題，我們也不用擔(dān)心太多，常用的UI組件也都用widget封裝好了，拿來即用。
而且，很多企業(yè)、很多項(xiàng)目，已經(jīng)在使用Flutter了，甚至也有了不少純Flutter開發(fā)的app，原因很簡單，使用Flutter進(jìn)行app開發(fā)可以給企業(yè)至少節(jié)省一半的成本，企業(yè)就不需要養(yǎng)著一群安卓開發(fā)和iOS開發(fā)。
只需要幾個Flutter工程師，一套代碼，就齊活了，時間成本、金錢成本、溝通成本，都節(jié)省了，并且Flutter他的性能是非常優(yōu)秀的，使用也非常穩(wěn)定，幾乎不會造成莫名其妙的crash，容錯率也大大增加了，而這些恰好都是企業(yè)最關(guān)心的痛點(diǎn)。
當(dāng)前的移動端大環(huán)境越來越卷，跨平臺也一直在擠兌移動端，對于我們iOS開發(fā)者來說，掌握一門跨平臺技術(shù)是越來越迫在眉睫的事情了，不僅是對提升當(dāng)前的薪資水平有幫助，而且也能給自己提供一個更大的發(fā)展空間，未來就有一個更多的可能性。
鋪墊完了回到正題，這篇文章呢，主要記錄我使用M1芯片的Mac Mini搭建Flutter開發(fā)環(huán)境的全過程，以及注意事項(xiàng)和坑點(diǎn)。
首先明確配置步驟：
1、Flutter環(huán)境配置；
2、IDE安裝配置；
3、Java環(huán)境配置。
首先，去官網(wǎng)下載Flutter安裝包，最新的穩(wěn)定版即可：
然后就要使用命令了，打開終端之前，在終端的簡介中勾選“使用Rosetta打開”，防止配置過程中出現(xiàn)某些莫名其妙的問題：
然后把國內(nèi)的鏡像加入到環(huán)境變量：
exportPUB_HOSTED_URL=https://pub.flutter-io.cnexportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
我的Flutter是安裝在development目錄下的：
cd~/development
然后解壓下載好的Flutter包到該目錄下：
unzip ~/Downloads/flutter_macos_2.2.3-stable.zip
把flutter安裝包里面的工具暫時添加到PATH里面：
exportPATH=`pwd`/flutter/bin:$PATH
這樣就完成了最基本的Flutter環(huán)境配置，接下來激動人心的時刻來了，就是首次執(zhí)行Flutter命令：
flutterdoctor
首次執(zhí)行Flutter命令的時候，會自動下載依賴項(xiàng)并自行編譯，當(dāng)然你也可以不執(zhí)行。
因?yàn)檫@句命令是用來檢查Flutter配置的，僅僅是做到這一步肯定會有問題。這個時候我們再來配置完整的環(huán)境變量，執(zhí)行：
vim~/.zshrc
怎么用我就不多介紹了，如果不擅長的話，就直接open吧，然后添加如下內(nèi)容：
保存并退出編輯，然后刷新一下，讓我們的配置立即生效：
source~/.zshrc
如果你是配在了$HOME/.bash_profile文件里面，也沒有關(guān)系，在~/.zshrc里面添加source ~/.bash_profile就搞定，因?yàn)镸ac系統(tǒng)版本在10.15之后shell默認(rèn)是zsh，之前都是bash，如果你還是依然用的bash，那就配置在.bash_profile就行了。
然后進(jìn)入下一個階段，我們需要選一個IDE，一般來說，IntelliJ IDEA，Android Studio和VS Code三選一即可，當(dāng)然你要顯擺你的能力的話，用文本編輯器或者直接終端上vim一樣可以做Flutter開發(fā)。
我選擇的是Android Studio，原因很簡單，Android Studio是基于IntelliJ IDEA的，而且集成了Android開發(fā)工具很方便開發(fā)調(diào)試，跟Flutter都是Google的親兒子，兄弟之間，會更有默契。
安裝好Android Studio之后，意味著Android SDK和自帶的Java開發(fā)環(huán)境也裝好了，然后還需要安裝兩個插件，F(xiàn)lutter插件和Dart插件，讓Android Studio支持Flutter開發(fā)：
安裝完成后重啟Android Studio讓插件生效，然后創(chuàng)建一個Flutter項(xiàng)目來測試一下可否正常運(yùn)行及調(diào)試：
選擇Flutter App，然后選擇你的Flutter SDK路徑，就是你的安裝包解壓路徑：
填寫你的項(xiàng)目名稱，默認(rèn)選中Android、iOS，然后點(diǎn)擊Finish：
項(xiàng)目打開后，首先在右上角的工具欄里選擇已經(jīng)在運(yùn)行的iOS模擬器（由于我做開發(fā)平時iOS模擬器從來不關(guān)，如果你不知道怎么單獨(dú)打開模擬器就用Xcode跑個項(xiàng)目吧）：
然后control+R運(yùn)行，一般很快就跑起來了，不會有任何問題：
然后我來試一下Android模擬器，如果設(shè)備下拉列表中沒有Android Emulator選項(xiàng)，就點(diǎn)擊最下面的Refresh，刷新一下，等待幾秒鐘一般就有了，或者也可以通過點(diǎn)擊右上角的手機(jī)小圖標(biāo)來打開Android Virtual Device Manager列表，從列表中啟動自帶的模擬器：
啟動好后，下拉列表中選中這個Android Emulator，control+R運(yùn)行，雖然心情很激動，但是問題還是來了：
就三行錯誤描述，說明這個問題好解決，沒有安裝JRE，就是Java的運(yùn)行環(huán)境，我去官網(wǎng)整一個：
安裝好后，系統(tǒng)偏好設(shè)置.app面板中就能看到Java的圖標(biāo)了：
再來運(yùn)行，不出所料，依然報錯：
這個我就不翻譯了，雖然比上個問題多了很多描述，但還是很好理解的，沒有找到JDK，就是Java Development Kit。
這里先明確一下JDK和JRE的區(qū)別，如果只是要運(yùn)行Java程序，安裝JRE就可以了，如果是做開發(fā)的話，就安裝JDK。
同時，JDK包含了JRE。我記得Android Studio是自帶了JDK的，為什么找不到呢，打開Project Structure，Project SDK，選中default JDK，運(yùn)行也并沒有什么用：
對Java本來就不甚了解的我，表示到了拼運(yùn)氣環(huán)節(jié)，嘗試了幾種方式無果后，索性先來看一下Flutter配置還有什么問題：
就兩個小問題了，第二個問題短一些，感覺比較好下手，意思是，找不到捆綁的Java版本，難道是需要配置環(huán)境變量嗎？
于是，我照著網(wǎng)上各種JDK的環(huán)境變量配置方式操作了一遍（這里開始不要跟著我來操作了，請看到最后）：
vim~/.zshrc
JAVA_HOME我試過了JRE、安裝包里自帶的，甚至gradle和android我都配置了，然而，并沒有什么用，一樣運(yùn)行不起來，
那沒關(guān)系，我姑且認(rèn)為我姿勢不對，找不到JDK我就再去oracle官網(wǎng)下載一個：
當(dāng)然，Mac系統(tǒng)也是自帶有JDK的，但是版本可能太低滿足不了要求，我就沒有去嘗試了，安裝好后找到安裝的路徑：
然后配置環(huán)境變量，替換如下內(nèi)容：
保存后進(jìn)行刷新，然后驗(yàn)證配置是否正確：
source~/.zshrcecho$JAVA_HOME
沒問題的話再來查看Java版本，如果內(nèi)容如下圖，則配置成功：
安裝JDK之前是這樣的：
另外，還可以用Android Studio來安裝JDK，如下圖：
這就省事多了，各個版本都可以選，比官網(wǎng)上那種看不懂的列表更容易理解，配置好JDK后萬事俱備，再來運(yùn)行：
怎么問題描述越來越長了，也越來越看不懂了，真是一個頭兩個大，這個時候表示沒什么耐心了，先來看看Flutter配置的第一個問題，提示也很清楚，按照提示執(zhí)行一下：
flutterdoctor --android-licenses
執(zhí)行完了沒報錯，再來看看Flutter配置有沒有問題：
竟！然！沒有問題了！我再來運(yùn)行，然鵝，錯誤依舊，這就有點(diǎn)超出我的能力范圍了，最后一個辦法，開始瘋狂嘗試，各種查資料，經(jīng)歷了九九八十一試之后，成功搞定：
怎么搞定的呢？其實(shí)是我想復(fù)雜了，直接找到Android Studio.app，然后右鍵顯示包內(nèi)容，找到j(luò)re文件夾，然后在文件夾里面新建一個jdk文件夾，把jre文件夾里面的Contents文件夾，直接拷貝一份到j(luò)dk文件夾里面去：
這是Android Studio自己的一個不友好的地方，也怪他把配置搞的太復(fù)雜，當(dāng)然Java大佬可以指點(diǎn)我一下，我確實(shí)沒有通過配置環(huán)境變量來搞定這個問題，甚至手動安裝的JDK也派不上用場，我刪掉了一樣沒有任何問題。
而且配置的環(huán)境變量最后我只留了Flutter的那三句，Java的全部不需要，當(dāng)然，JAVA_HOME那句可以留著，否則執(zhí)行flutter doctor過不了，但刪掉也不影響跑安卓模擬器。
模擬器都正常運(yùn)行和調(diào)試沒問題之后，我來試一下iPhone真機(jī)運(yùn)行，依然沒有成功，不過已經(jīng)見怪不怪了，提示：無法打開“iproxy”，因?yàn)闊o法驗(yàn)證開發(fā)者，這個問題可能是因?yàn)闄?quán)限不夠，執(zhí)行這句命令就可以搞定：
sudoxattr -d com.apple.quarantine /Users/zions/development/flutter/bin/cache/artifacts/usbmuxd/iproxy
（滑動顯示更多）
至此，就可以愉快的跟Flutter玩耍了。
就我的感受而言，整個過程還是挺折騰的，特別是對于純iOS開發(fā)者來說，讓我去搞這些知識體系之外的東西，遇到問題確實(shí)也只能碰碰運(yùn)氣，如果你身邊正好有Java大佬的話，一定要去問一問。
可能會簡單很多，也不會毫無頭緒，不要像我一樣喜歡自己埋頭去鉆（混的比較慘，身邊沒有Java朋友），到最后碰對了可能也不知其所以然，也不敢發(fā)表自己的看法，畢竟不是自己的專業(yè)領(lǐng)域，記錄以共勉。
