這里主要講解Flutter基本環(huán)境搭建，目前Flutter已經(jīng)正式發(fā)布，網(wǎng)上已經(jīng)有好多關(guān)于介紹Flutter的文章。寫作此文章的目的是記錄自己學(xué)習(xí)過程中的點(diǎn)點(diǎn)滴滴，同時(shí)也是為了督促自己，不是為了嘩眾取寵。廢話不多說，直奔主題！

一、Flutter SDK下載以及安裝

1.1、網(wǎng)絡(luò)環(huán)境
一般來(lái)說，要想安裝或者依賴的某個(gè)框架，它自身也可能依賴別的框架或者組件之類的。因此，你就要將所有相關(guān)的框架或組件下載下來(lái)并進(jìn)行安裝。然而這些框架或組件，來(lái)源可能不是一個(gè)網(wǎng)站，特別是你訪問的這些網(wǎng)站都是國(guó)外網(wǎng)站，如果你生活在我天朝，就不得不面臨一個(gè)問題，就是訪問某些國(guó)外網(wǎng)站會(huì)受到限制。為了避免不必要的麻煩，有以下兩種方式:

• 翻墻
  鄙人采用的這種方式，直接購(gòu)買VPN
• 使用鏡像
  慶幸，F(xiàn)lutter官方為中國(guó)開發(fā)者搭建了臨時(shí)鏡像；你只需要將環(huán)境變量加入到用戶環(huán)境變量中，如下:

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

備注：
1、這里說的是臨時(shí)鏡像，是因?yàn)楹笃贔lutter官方會(huì)推出一個(gè)新的穩(wěn)定版本，到時(shí)候你只需要更換對(duì)應(yīng)的地址就可以了，具體詳情查看Using Flutter in China。
2、這里添加環(huán)境變量添加到用戶環(huán)境變量一般采用添加到.bash_profile文件中，全局生效(下文會(huì)詳細(xì)介紹)。

1.2、SDK下載

• Flutter官網(wǎng)下載
• github上下載
  備注:
  個(gè)人經(jīng)驗(yàn)，F(xiàn)lutter官網(wǎng)下載沒有g(shù)ithub下載快(你如果已經(jīng)翻墻就當(dāng)我沒有說)。

1.3、SDK安裝
解壓安裝包到你指定的目錄
記住，這里指定好的目錄以后不要輕易移動(dòng)，否則就要重新配置路徑。
這里我們?cè)诟夸浵滦陆╠evelopment文件夾，在development文件夾下面放置剛才的解壓包，如圖：

圖1 SDK路徑

1.4、配置環(huán)境變量
1.4.1、臨時(shí)環(huán)境變量配置
打開終端、執(zhí)行下面代碼:

$ export PATH=`pwd`/flutter/bin:$PATH

備注:
1、這段代碼只對(duì)當(dāng)前窗口，換句話說要是新開一個(gè)終端窗口，就不生效了。這樣每次打開一個(gè)新的窗口就需要執(zhí)行上述代碼，實(shí)在是不方便。
2、執(zhí)行這段代碼需要在flutter當(dāng)前目錄執(zhí)行，換句換說就是先執(zhí)行

$ cd /Users/yangshichuan/development

然后執(zhí)行

$ export PATH=`pwd`/flutter/bin:$PATH

1.4.2、設(shè)置永久環(huán)境變量
為了避免臨時(shí)環(huán)境變量的弊端，最好設(shè)置永久環(huán)境變量。方法如下:

• 打開(或創(chuàng)建).bash_profile

$ touch $HOME/.bash_profile

• 輸入以下代碼：

$ export PATH=/Users/yangshichuan/development/flutter/bin:$PATH

這里的路徑/Users/yangshichuan/development/flutter是你電腦放置flutter的絕對(duì)路徑，更換為你自己的路徑就好。

• 運(yùn)行指令

$ source $HOME/.bash_profile

• 驗(yàn)證路徑是否正確，執(zhí)行指令:

$ echo $PATH

此時(shí)不受終端窗口限制，已經(jīng)和你的計(jì)算機(jī)綁定在一起了。
上面提到的配置臨時(shí)鏡像路徑也可以添加到.bash_profile文件中。

1.5、運(yùn)行flutter doctor
此命令可以幫助你查看是否需要安裝其它依賴項(xiàng)

$ flutter doctor

效果圖如下:

圖2

因?yàn)槲乙呀?jīng)安裝完所有的配置項(xiàng)，即使初次安裝也不用擔(dān)心，按照終端給出的提示可以順利安裝成功，如果其中出現(xiàn)安裝失敗，唯一可能的原因是網(wǎng)絡(luò)不好或者需要翻墻。

總結(jié):

1、總的來(lái)說，安裝Flutter主要是：下載Flutter框架??指定Flutter解壓路徑??配置環(huán)境變量??運(yùn)行flutter doctor

2、對(duì)于習(xí)慣終端操作的同學(xué)可以直接運(yùn)行下面指令：

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

如果已經(jīng)有VPN了，可以不用執(zhí)行前面兩句，如下：

$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

二、安裝編譯器

對(duì)于編譯器，有好幾種選擇如Android Studio、IntelliJ IDEA、VS Code等。這里主要說的是Android Studio的配置方法，大同小異。

2.1、Flutter和Dart插件安裝
打開Android Studio、打開偏好設(shè)置、具體操作如下圖:

圖3

點(diǎn)擊左側(cè)標(biāo)簽Plugins，在右側(cè)搜索框輸入flutter/dart，搜索出相應(yīng)插件，點(diǎn)擊Install，如下圖:

圖4 圖5

因?yàn)槲乙呀?jīng)安裝，所以上面沒有顯示Install按鈕。
此時(shí)，需要重新退出Android Studio，否則不生效。
備注:
這里對(duì)Android Studio是有版本要求的，要高于3.0版本，詳情可以查看官網(wǎng)Flutter官網(wǎng)。

2.2、新建Flutter項(xiàng)目
經(jīng)過上面步驟，重新打開Android Studio，如下圖:

圖6

圖7

圖8
備注:
這里的Flutter SDK path指的是我們前面解壓包放在的位置<這也就印證了為什么不要輕易移動(dòng)SDK的原因>

圖9

點(diǎn)擊Finish按鈕，至此項(xiàng)目建立完成，如下圖:

圖10

三、運(yùn)行第一個(gè)程序

經(jīng)過以上步驟，我們已經(jīng)做好所有準(zhǔn)備工作，此時(shí)已經(jīng)迫不及待想要運(yùn)行以下程序，看一下效果。
經(jīng)過上面創(chuàng)建的工程，里面會(huì)包含一個(gè)默認(rèn)demo，一個(gè)簡(jiǎn)單的計(jì)數(shù)器，效果如下:

圖11

點(diǎn)擊右上角運(yùn)行按鈕，查看效果：

圖12

如果想修改一下，查看實(shí)時(shí)效果，點(diǎn)擊右上角熱重載按鈕：

圖13

備注:
最好的學(xué)習(xí)方法是下載官方demo運(yùn)行，看看效果，然后多思考，多模仿，后續(xù)會(huì)陸續(xù)深入學(xué)習(xí)并更新文章。

四、Android studio在mac上卡頓問題解決

在初次安裝Android studio軟件時(shí)，運(yùn)行時(shí)，發(fā)現(xiàn)非?？D。雖然我的電腦配置不是太高，但是MacBook Pro那也不是蓋的，足以碾壓絕大數(shù)Windows電腦。
經(jīng)過仔細(xì)查找資料分析，得出以下結(jié)論：
初次安裝Android studio，mac會(huì)為它分配一定的運(yùn)行內(nèi)存，但是比較低，這就造成了即使當(dāng)前mac有多余內(nèi)存也不會(huì)分配給Android studio，運(yùn)行軟件就會(huì)卡頓，解決方案請(qǐng)查看解決Android Studio在MacbookPro 13下卡頓的問題，這里就不在啰嗦了。

關(guān)聯(lián)文章:
Flutter學(xué)習(xí)之Dart語(yǔ)法

參考網(wǎng)址：

Flutter官網(wǎng)
Flutter中文網(wǎng)
Flutter社區(qū)中文資源

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(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/18395.html