flutter是最近比較火的新玩意，解決移動(dòng)端跨平臺(tái)的痛點(diǎn)，且性能不輸原生開發(fā)。 在flutter之前，為了解決跨平臺(tái)，使用h5、mui+hbuilder、weex、ionic等不少解決方案，雖然都可以實(shí)現(xiàn)，但是效果都不怎么理想。今天主要說說在mac上怎么搭建flutter開發(fā)環(huán)境，我在搭建的過程中遇到不少坑，這里給大家填坑，希望大家在搭建的時(shí)候能夠跳出這些坑，順利體驗(yàn)一把新flutter。話不多說，開始干活！

準(zhǔn)備：首先要有jdk、androidstudio(3.1及以上)、android sdk環(huán)境。

第一步：安裝flutter：

1.打開終端，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.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn，然后重復(fù)2和3即可

5.完成后cd 進(jìn)入flutter，然后執(zhí)行：flutter doctor，如果flutter sdk沒有安裝會(huì)進(jìn)入安裝，此時(shí)需要等待一段時(shí)間。

6.安裝完畢后再執(zhí)行flutter doctor 看看檢查結(jié)果

紅x代表沒有安裝，綠色的勾才算安裝成功，我之前就安裝過了所以多個(gè)地方配置過綠色的勾會(huì)多點(diǎn)，你的不一定要和我一致，只要是flutter要是綠色的，安裝沒有問題的話，記住你安裝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)安卓模擬器，如果沒有則創(chuàng)建一個(gè)，這里就不說明了），

1.填坑1：這里不得不說一個(gè)坑，我運(yùn)行項(xiàng)目一直都是停在? initializing gradle...這個(gè)的地方?jīng)]有反應(yīng)，原因是在下載gradle，非常慢，為了解決這個(gè)下載慢的問題，需要到網(wǎng)上下載相應(yīng)的gradle包，打開項(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)目選擇版本。

下載好自后，打開androidstudio的設(shè)置找到：查看gradle路徑

找個(gè)這個(gè).gradle這個(gè)目錄，是隱藏的文件夾，mac使用shift+command+.來查看隱藏文件，找到.gradle>wrapper>dists把剛剛下載好的gradle解壓后拷貝進(jìn)來：

這樣gradle就配置好了，再次運(yùn)行項(xiàng)目，發(fā)現(xiàn)還是報(bào)錯(cuò)了。

2.填坑2:原因是因?yàn)間oogle在國內(nè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)目還沒有完，還需要找到flutter sdk目錄下：flutter>packages>flutter_tool>gradle>fultter.gradle打開：

也要修改成阿里云的鏡像,如下:

至此配置完畢，再次運(yùn)行項(xiàng)目期待已久的flutter項(xiàng)目就運(yùn)行起來了：

三.總結(jié)：

關(guān)于flutter環(huán)境搭建就介紹到這里了，如果有疑問歡迎評(píng)論留言。網(wǎng)上雖然教程多，但是坑還是很多。希望能幫助有需要的人，喜歡我的文章記得關(guān)注我哦?！

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/18152.html