前言
Flutter現(xiàn)在沒聽過的怕是沒幾位井中同仁了吧结洼，繼React Native大潮后的又一跨平臺吊炸天框架拢操。風(fēng)風(fēng)火火一年了蜓堕，我也得借著這個機(jī)會趕緊上波末班車（主要是技術(shù)老大翻她牌子了）。到目前的體驗(yàn)是較為驚艷年枕。
Flutter簡介
Flutter是Google推出的基于Dart語言開發(fā)的跨平臺開源UI框架标捺，旨在統(tǒng)一紛紛擾擾的跨平臺開發(fā)框架懊纳，在UI層面上多端共用一套Dart代碼來實(shí)現(xiàn)多平臺適配開發(fā)。目前應(yīng)用比較廣泛的還是移動端iOS和安卓亡容，說是目標(biāo)是同一段大前段嗤疯，接下來我們就開始搭建環(huán)境吧。
個人觀點(diǎn)
劃重點(diǎn)了闺兢，F(xiàn)lutter是UI框架茂缚，就是寫寫頁面和業(yè)務(wù)邏輯可以，底層跟第三方的交互還是要通過原生來實(shí)現(xiàn)的屋谭，是基于MethodChannel來為雙方提供通信交互能力脚囊，這個后面文章再詳細(xì)介紹。所以戴而，奉勸各位沒有移動端開發(fā)經(jīng)驗(yàn)的還是暫時不要折騰了凑术，你沒有一點(diǎn)原生知識翩蘸，真的很難拿下所意。
Flutter之所以在性能上體現(xiàn)的比RN更為優(yōu)秀，從技術(shù)層面上來說催首，RN是在 JS 端通過NativeModules來引用原生組件扶踊，而Flutter是通過Skia渲染引擎來繪制畫面。這中間就少了一層橋接郎任，效率自然是要提升不少。
生態(tài)環(huán)境上來說分井，F(xiàn)lutter才剛剛起步霉猛，不過今年和去年相比尺锚，顯然生態(tài)圈已經(jīng)擴(kuò)大了一倍，各種插件也開始層出不窮瘫辩。相比weex來說，那是個什么玩意兒啊伐厌。
跟H5相比承绸。其實(shí)怎么說呢，H5到Flutter的底層渲染其實(shí)都是Skia军熏。Flutter也只不過是去掉了對低版本標(biāo)準(zhǔn)的支持卷扮。
適合開發(fā)人群
原生開發(fā)人員画饥。本身就是直接受益者，接觸和學(xué)習(xí)起來十分迅速抖甘。Dart和Java語法較為相似衔彻。所以現(xiàn)在安卓開發(fā)人員對之熱情較高。有移動端需求的前端開發(fā)人員澄港。前提是要有一定的Java和OC基礎(chǔ)柄沮。不然總不能完全依靠插件來實(shí)現(xiàn)需求吧祖搓。
Flutter開發(fā)環(huán)境配置（Mac）
這里就只對mac上的環(huán)境配置做個簡單介紹拯欧。因?yàn)镕lutter本身就是跨平臺開發(fā)，你要用到iOS開發(fā)總得裝個Xcode啊藏姐，所以只能在mac系統(tǒng)上進(jìn)行该贾。
所需工具
- 命令行工具
- VSCode/AS靶庙、Xcode
- Git
詳細(xì)步驟
下載Flutter SDK
1.下載zip包
https://flutter.dev/docs/development/tools/sdk/archive?tab=macos#macos
下載完后解壓到你想要存放的文件夾娃属，這里暫定文件夾為
flutter_sdk矾端。
2.shell
cd ../flutter_sdk //你想要存放SDK的文件夾地址
git clone -b stable https://github.com/flutter/flutter.git
配置環(huán)境變量
如果沒有科學(xué)上網(wǎng)工具卵皂，需要配置一下環(huán)境變量使用鏡像來下載所需的文件灯变，否則的話大幾率會下載失斕砘觥；另外就是需要配置sdk的路徑方便全局調(diào)用flutter命令凡壤。先給出相關(guān)地址：
flutter國內(nèi)鏡像地址：https://storage.flutter-io.cn
pub國內(nèi)鏡像地址：https://pub.flutter-io.cn
上面地址并不是一直穩(wěn)定的亚侠，需要長期穩(wěn)定的鏡像地址可以自行在Flutter社區(qū)上查看俗扇，及時更換最新的地址铜幽。下面是具體的配置步驟：
//打開配置文件（在shell中操作）
cd $HOME
vim ~/.bash_profile
//在打開的頁面添加上下面代碼
export PATH=../flutter_sdk/flutter/bin:$PATH
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PUB_HOSTED_URL=https://pub.flutter-io.cn
上面的三條地址分別是:
配置flutter全局路徑；
配置flutter鏡像地址爹凹；
配置pub鏡像地址；這里不知道pub是什么的暫時不用管绘趋，這里一起配置上颗管，后面會提到。
其中要將
../flutter_sdk替換為你自己的sdk存放路徑帽馋。例如：/Users/fengshun/workFeng/Flutter
配置完成后绽族，再調(diào)用下面命令使之生效吧慢。下次無論在哪打開shell都可以使用flutter命令；
source ~/.bash_profile
這里有個坑點(diǎn)要注意：
有的小伙伴可能會發(fā)現(xiàn)配置完后每次重新打開終端都要重新source ~/.bash_profile才可以正常使用flutter命令匈仗；這是因?yàn)閦sh加載的是 ~/.zshrc文件悠轩，而.zshrc文件中并沒有定義任務(wù)環(huán)境變量攻泼。
解決辦法是在.zshrc里面加入一行source ~/.bash_profile坠韩。配置方法跟上面相同，不再贅述音比。
這個時候就可以使用flutter命令了洞翩，現(xiàn)在打開終端焰望，運(yùn)行：
flutter -h
正常的話就會出來flutter的命令幫助簡介熊赖；
檢查環(huán)境
上面的環(huán)境配好以后震鹉，就可以運(yùn)行flutter檢查命令了，如下：
flutter doctor
接下來flutter會自動檢查你當(dāng)前的電腦環(huán)境有什么缺失的配置迎膜，最后會出來下圖所示：
這個圖片是你缺失最全的了
因?yàn)槲沂莍os開發(fā)人員所有xocde是有的,但是如果你沒有
由于是在mac系統(tǒng)上磕仅，因此我們只需要配置Xcode即可榕订，根據(jù)提示信息執(zhí)行如下代碼：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
如下圖所示：
當(dāng)然你可以去appstore下載
然后在次執(zhí)行flutter doctor,如下圖所示：
根據(jù)提示依次brew update等命令卸亮，如下圖所示的命令：
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
注意：pod setup是超級慢兼贸，而且老是失敗溶诞，你要有耐心
在這期間你可以去下載vscode了
地址:https://code.visualstudio.com/docs/?dv=osx
在執(zhí)行命令期間我們可以配置ide工具，我們使用的是vscode喧务，打開vscode枉圃，然后找打插件搜索Flutter孽亲，如下圖所示：
選擇第一個安裝返劲，如下圖則表示安裝成功：
在次執(zhí)行flutter doctor查看安裝情況篮绿，此時顯示的vscode已經(jīng)打了綠色的對號說明配置成功了亲配，如下圖所示：
待命令全部執(zhí)行完畢后再次執(zhí)行flutter doctor即可查看依賴已經(jīng)安裝完成，如下圖所示：
其中[?]是通過，[?]是不通過鲸睛。下面簡要解釋一下這幾條：
1官辈、flutter當(dāng)前分支，版本號晴股，系統(tǒng)環(huán)境
2电湘、開發(fā)所需要的安卓開發(fā)工具鏈
3鹅经、開發(fā)需要的iOS開發(fā)工具鏈
4瘾晃、Android Studio安裝情況
5、有沒有已連接的可用設(shè)備（一般是手機(jī)設(shè)備）
因?yàn)槲译娔X已經(jīng)安裝過劫拢，沒法展示所有的報錯信息舱沧，這里簡要列出幾個重要的問題說明一下偶洋；
看到綠色[?]自然不需要去關(guān)注涡真，紅色[?]也不需要慌，按照每條的提示信息逐步輸入命令安裝對應(yīng)的文件就可以了缸剪，這里建議使用科學(xué)上網(wǎng)工具來下載杏节，不然可能會失數湔蟆壮啊；
其中第四條報錯其實(shí)是因?yàn)闆]有安裝Android Studio，這個其實(shí)無所謂玄渗，像我就是使用VScode來開發(fā)藤树，看你選擇，不安裝其實(shí)也是可以的升略。
flutter doctor --android-licenses
看到android-licenses字眼品嚣，直接執(zhí)行囚霸，然后一路確認(rèn)下去就可以了拓型。就是安裝安卓證書。
cocoapods安裝
看到cocoapods册养、pod字眼球拦；這個一般安卓開發(fā)不太了解帐我，是iOS開發(fā)用到的第三方管理工具拦键，和上面提到的flutter的pub作用相似，安裝也需要設(shè)置鏡像萄金，詳細(xì)安裝方法這里提供一個詳細(xì)地址自己查看：
cocoapods安裝
這里注意的是如果你自己搜到一些安裝教程氧敢，切記鏡像源要設(shè)置為ruby-china的孙乖，taobao的鏡像源很早以前就不再維護(hù)了。詳細(xì)的看這個網(wǎng)址ruby-china鏡像源鼓拧，把地址換位網(wǎng)址內(nèi)提供的鏡像地址。
cocoapods安裝完成后钮糖，所有pod相關(guān)的命令依次執(zhí)行下去店归，直到flutter doctor不再列出相關(guān)錯誤為止消痛。
iOS toolchain
這個唯一的也是最有效的解決方式就是下載最新版的Xcode，基本就會解決相應(yīng)的所有問題逞带，下載地址在App Store展氓；所以我前文提到建議使用mac開發(fā)脸爱，當(dāng)然簿废，如果你只需要開發(fā)安卓族檬，這條和上面cocoapods那條可以一并忽略其報錯信息。
所有都安裝完成的話轨淌，就是我這樣的一片綠了：
一般線上開發(fā)肯定需要使用穩(wěn)定版本的SDK递鹉，平時開發(fā)中如果想要查看或者切換分支躏结，可以使用：
flutter channel //查看所有分支和當(dāng)前分支
flutter channel master //切換到master分支
要更新當(dāng)前分支到最新版本：
flutter upgrade
其實(shí)直接cd到flutter SDK的文件夾下用git更新也是一樣的媳拴。以上完成后，基本flutter的開發(fā)環(huán)境就完全搭建起來了塞关，接下來繼續(xù)Android Studio和VScode的設(shè)置帆赢。
Android Studio/VScode安裝flutter插件
Android Studio
Preferences => Plugins => search flutter安裝詳細(xì)見圖：
VScode
Flutter安裝見圖：
Dart安裝同上；
這里有個編譯配置需要注意一下瘾婿，安卓真機(jī)編譯
apk安裝的時候有時候會出現(xiàn)閃退烤咧，要添加編譯選項(xiàng)--target-platform android-arm髓削，詳見flutter issue立膛。
Android Studio：在項(xiàng)目的編譯選項(xiàng)Additional arguments中添加；
VScode：在項(xiàng)目的.vscode/launch.json中添加好啰；
詳細(xì)見圖：
建并運(yùn)行demo
創(chuàng)建flutter工程有兩種方式，一種直接命令創(chuàng)建椰弊，個人喜歡這種瓤鼻，方便簡潔茬祷；另一種就是通過可視化IDE來創(chuàng)建了；
下面分別簡單介紹一下秸妥，主要以VScode為主粥惧。
這里項(xiàng)目命名記得需要小寫字母加下劃線組成。
命令創(chuàng)建
在對應(yīng)的文件目錄下：
flutter creat flutter_demo //創(chuàng)建一個Java和OC的項(xiàng)目
flutter create -i swift -a kotlin flutter_demo //創(chuàng)建一個kotlin和swift的項(xiàng)目
flutter項(xiàng)目默認(rèn)是支持Java和OC的檩禾，如果需要添加對kotlin和swift的支持盼产，需要按照上面第二條來創(chuàng)建
Android Studio創(chuàng)建
File => New => New Flutter Project => Flutter Application如圖：
提示找不到Dart支持的記得去設(shè)置里面添加一下flutter的路徑戏售。
VScode創(chuàng)建
同命令行灌灾，創(chuàng)建完成用VScode打開
運(yùn)行demo
剛創(chuàng)建的demo會有一個計(jì)數(shù)器示例锋喜，找到main.dart文件運(yùn)行或者直接flutter run就可以運(yùn)行整個項(xiàng)目。
這里要注意的是段标，如果在網(wǎng)上下載了別的項(xiàng)目demo需要運(yùn)行逼庞，要先在pubspec.yaml文件內(nèi)下載第三方包或者直接運(yùn)行flutter packages get瞻赶，直到項(xiàng)目不再報錯就可以運(yùn)行了砸逊。
一切順利的話痹兜，就可以看到如下圖所示的項(xiàng)目了：
到這里，基本上環(huán)境配置教程就完成了崖叫，親自去感受一下實(shí)時渲染的效果吧。更多詳細(xì)學(xué)習(xí)進(jìn)度敬請關(guān)注拍柒。
