flutter是最近比較火的新玩意，解決移動(dòng)端跨平臺(tái)的痛點(diǎn)，且性能不輸原生開(kāi)發(fā)。 在flutter之前，為了解決跨平臺(tái)，使用h5、mui+hbuilder、weex、ionic等不少解決方案，雖然都可以實(shí)現(xiàn)，但是效果都不怎么理想。今天主要說(shuō)說(shuō)在mac上怎么搭建flutter開(kāi)發(fā)環(huán)境，我在搭建的過(guò)程中遇到不少坑，這里給大家填坑，希望大家在搭建的時(shí)候能夠跳出這些坑，順利體驗(yàn)一把新flutter。話不多說(shuō)，開(kāi)始干活！
文章引用：code人生 www.itdecent.cn/p/5d476710b72a?
準(zhǔn)備：首先要有jdk、androidstudio(3.1及以上)、android sdk環(huán)境。
第一步：安裝flutter：
1.打開(kāi)終端，cd到你要安裝的目錄
2. 下載flutter：git clone -b beta https://github.com/flutter/flutter.git
3.下載好flutter后就在當(dāng)前目錄下執(zhí)行：
?export PATH=`pwd`/flutter/bin:$PATH?
4. 如果下載失敗的話執(zhí)行：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
，然后重復(fù)2和3即可
5.完成后cd 進(jìn)入flutter，然后執(zhí)行：flutter doctor，如果flutter sdk沒(méi)有安裝會(huì)進(jìn)入安裝，此時(shí)需要等待一段時(shí)間。
6.安裝完畢后再執(zhí)行flutter doctor 看看檢查結(jié)果
紅x代表沒(méi)有安裝，綠色的勾才算安裝成功，我之前就安裝過(guò)了所以多個(gè)地方配置過(guò)綠色的勾會(huì)多點(diǎn)，你的不一定要和我一致，只要是flutter要是綠色的，安裝沒(méi)有問(wèn)題的話，記住你安裝sdk的路徑。
7.Androidstudio需要安裝flutter插件
安裝好后重啟即可！
第二步：使用androidstudio新建flutter的helloworld
1.安裝flutter插件重啟androidstudio后會(huì)發(fā)現(xiàn)多了一個(gè)選項(xiàng)如下：
2.新建flutter項(xiàng)目
選擇后點(diǎn)擊next就可以創(chuàng)建flutter項(xiàng)目了，可能需要等待一段時(shí)間。
完成后項(xiàng)目如下：
3.運(yùn)行項(xiàng)目（需要啟動(dòng)安卓模擬器，如果沒(méi)有則創(chuàng)建一個(gè)，這里就不說(shuō)明了），
1.填坑1：這里不得不說(shuō)一個(gè)坑，我運(yùn)行項(xiàng)目一直都是停在 initializing gradle...這個(gè)的地方?jīng)]有反應(yīng)，原因是在下載gradle，非常慢，為了解決這個(gè)下載慢的問(wèn)題，需要到網(wǎng)上下載相應(yīng)的gradle包，打開(kāi)項(xiàng)目下的android>gradle>wepper>gradle-wrapper.properties 查看gradle版本，如下:
gradle下載地址：http://services.gradle.org/distributions/
我這里是gradle-4.10.2-all.zip的版本，所以我下載的就是gradle-4.10.2-all.zip，這個(gè)根據(jù)自己的項(xiàng)目選擇版本。
下載好自后，打開(kāi)androidstudio的設(shè)置找到：查看gradle路徑
找個(gè)這個(gè).gradle這個(gè)目錄，是隱藏的文件夾，mac使用shift+command+.來(lái)查看隱藏文件，找到.gradle>wrapper>dists把剛剛下載好的gradle解壓后拷貝進(jìn)來(lái)：
這樣gradle就配置好了，再次運(yùn)行項(xiàng)目，發(fā)現(xiàn)還是報(bào)錯(cuò)了。
2.填坑2:原因是因?yàn)間oogle在國(guó)內(nèi)無(wú)法訪問(wèn)，需要使用阿里云的鏡像：
打開(kāi)android下的builde.gradle：配置如下
阿里云鏡像：
maven { url'https://maven.aliyun.com/repository/google' }
maven { url'https://maven.aliyun.com/repository/jcenter' }
maven { url'http://maven.aliyun.com/nexus/content/groups/public' }
處理完了項(xiàng)目還沒(méi)有完，還需要找到flutter sdk目錄下：flutter>packages>flutter_tool>gradle>fultter.gradle打開(kāi)：
也要修改成阿里云的鏡像,如下:
至此配置完畢，再次運(yùn)行項(xiàng)目期待已久的flutter項(xiàng)目就運(yùn)行起來(lái)了：
三.總結(jié)：
關(guān)于flutter環(huán)境搭建就介紹到這里了，如果有疑問(wèn)歡迎評(píng)論留言。網(wǎng)上雖然教程多，但是坑還是很多。希望能幫助有需要的人，喜歡我的文章記得關(guān)注我哦??！
