Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，Flutter正在被越來(lái)越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。

文章目錄

• • 1，下載SDK安裝包
  • 2，配置環(huán)境變量
  • 3，執(zhí)行flutter doctor
  • 4，創(chuàng)建新項(xiàng)目
  • 5，Flutter 學(xué)習(xí)資料
  • 6，Flutter macOS環(huán)境配置

學(xué)習(xí)一門新的語(yǔ)言、新的開發(fā)方式，先從開發(fā)環(huán)境開始配起：

1，下載SDK安裝包

點(diǎn)擊下載

如果下載不了，可以選擇github下載

注意，不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\

下載好安裝包之后解壓

2，配置環(huán)境變量

在執(zhí)行flutter doctor檢測(cè)是否安裝完成之前，要先配置好環(huán)境變量才行
所以先配置環(huán)境，以下為Windows示例（mac示例）：
解壓之后，找到bin目錄

然后桌面右鍵 我的電腦>屬性>高級(jí)系統(tǒng)設(shè)置>環(huán)境變量>在用戶變量中的Path中添加上圖中到bin目錄的路徑，比如flutter\bin

3，執(zhí)行flutter doctor

找到解壓flutter目錄下的flutter_console.bat ，雙擊執(zhí)行

執(zhí)行flutter doctor檢測(cè)是否安裝完成

在命令提示符或PowerShell窗口中運(yùn)行此命令。目前，Flutter不支持像Git Bash這樣的第三方shell。

執(zhí)行結(jié)果：

這里出現(xiàn)了4個(gè)issues，果然萬(wàn)事開頭難，然后中間難，然后結(jié)尾難。

先不慌，大致過(guò)一下這幾個(gè)紅色的×：

• 首先第一個(gè)是flutter Unable to locate Android SDK. 找不到Android SDK？明明有的呀，繼續(xù)看，它說(shuō)如果安裝在一個(gè)自定義的路徑，要設(shè)置ANDROID_HOME，ok 那就加上ANDROID_HOME變量，變量值就是Android SDK路徑
  
• 然后看下面的異常，我有兩個(gè)AS版本，隨便看其中一個(gè)就行，問(wèn)題不大，原來(lái)是Flutter和Dart的插件沒安裝

不慌，先配置ANDROID_HOME變量，配置好之后再次執(zhí)行flutter doctor，發(fā)現(xiàn)結(jié)果還是不行？！

返回繼續(xù)看文檔，發(fā)現(xiàn)了無(wú)任何特效的一句話重啟Windows以應(yīng)用此更改 ，原來(lái)是忘了重啟了，既然要重啟，那順便把插件也裝了吧，反正也是要重啟AS的

在Settings>Plugins中搜索flutter，然后安裝，安裝之前會(huì)提示先裝Dart插件，同意即可

安裝完成之后，重啟。

重啟之后，打開之前解壓的flutter目錄，雙擊打開flutter_console.bat，再次執(zhí)行flutter doctor，結(jié)果如下：

ok，Android SDK路徑?jīng)]問(wèn)題了，AS3.2的插件也裝了，接下來(lái)就是創(chuàng)建一個(gè)新項(xiàng)目跑起來(lái)試試了。

4，創(chuàng)建新項(xiàng)目

重啟之后創(chuàng)建項(xiàng)目就多了一條New Flutter Project...



項(xiàng)目名稱是小寫才行，然后Next、Finish 就行

然后點(diǎn)擊運(yùn)行，選擇一個(gè)模擬器，效果如下：

ok，這就跑起來(lái)了，初始就是官方給的例子，順便加了一句綠色的Hello World , Hello Flutter

ok，Flutter的環(huán)境配置就到此完成了，接下來(lái)就是Flutter開發(fā)的 入門>進(jìn)階>放棄。。

官方配置文檔

5，Flutter 學(xué)習(xí)資料

• Flutter官網(wǎng)
• Flutter中文網(wǎng)
• Flutter for Android 開發(fā)者
• Flutter github
• 咸魚技術(shù)
• 掘金Flutter專欄
• 升級(jí) Flutter

6，Flutter macOS環(huán)境配置

https://blog.csdn.net/yechaoa/article/details/95389931

總結(jié)

以上是生活随笔為你收集整理的Flutter 环境配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。