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

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

第一步：安裝flutter：

1.打開終端，cd到你要安裝的目錄

2. 下載flutter： git clone -b beta https://github.com/flutter/flutter.git

3.下載好flutter后就在當前目錄下執行：?export PATH=`pwd`/flutter/bin:$PATH?

4. 如果下載失敗的話執行：export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn，然后重復2和3即可

5.完成后cd 進入flutter，然后執行：flutter doctor，如果flutter sdk沒有安裝會進入安裝，此時需要等待一段時間。

6.安裝完畢后再執行flutter doctor 看看檢查結果

紅x代表沒有安裝，綠色的勾才算安裝成功，我之前就安裝過了所以多個地方配置過綠色的勾會多點，你的不一定要和我一致，只要是flutter要是綠色的，安裝沒有問題的話，記住你安裝sdk的路徑。

7.Androidstudio需要安裝flutter插件

安裝好后重啟即可！

第二步：使用androidstudio新建flutter的helloworld

1.安裝flutter插件重啟androidstudio后會發現多了一個選項如下：

2.新建flutter項目

選擇后點擊next就可以創建flutter項目了，可能需要等待一段時間。

完成后項目如下：

3.運行項目（需要啟動安卓模擬器，如果沒有則創建一個，這里就不說明了），

1.填坑1：這里不得不說一個坑，我運行項目一直都是停在? initializing gradle...這個的地方沒有反應，原因是在下載gradle，非常慢，為了解決這個下載慢的問題，需要到網上下載相應的gradle包，打開項目下的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，這個根據自己的項目選擇版本。

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

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

這樣gradle就配置好了，再次運行項目，發現還是報錯了。

2.填坑2:原因是因為google在國內無法訪問，需要使用阿里云的鏡像：

打開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' }

處理完了項目還沒有完，還需要找到flutter sdk目錄下：flutter>packages>flutter_tool>gradle>fultter.gradle打開：

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

至此配置完畢，再次運行項目期待已久的flutter項目就運行起來了：

三.總結：

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/18152.html