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

一、Flutter SDK下載以及安裝

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

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

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

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

1.2、SDK下載

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

1.3、SDK安裝
解壓安裝包到你指定的目錄
記住，這里指定好的目錄以后不要輕易移動，否則就要重新配置路徑。
這里我們在根目錄下新建development文件夾，在development文件夾下面放置剛才的解壓包，如圖：

圖1 SDK路徑

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

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

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

$ cd /Users/yangshichuan/development

然后執(zhí)行

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

1.4.2、設(shè)置永久環(huán)境變量
為了避免臨時環(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的絕對路徑，更換為你自己的路徑就好。

• 運行指令

$ source $HOME/.bash_profile

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

$ echo $PATH

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

1.5、運行flutter doctor
此命令可以幫助你查看是否需要安裝其它依賴項

$ flutter doctor

效果圖如下:

圖2

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

總結(jié):

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

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

$ 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

二、安裝編譯器

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

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

圖3

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

圖4 圖5

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

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

圖6

圖7

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

圖9

點擊Finish按鈕，至此項目建立完成，如下圖:

圖10

三、運行第一個程序

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

圖11

點擊右上角運行按鈕，查看效果：

圖12

如果想修改一下，查看實時效果，點擊右上角熱重載按鈕：

圖13

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

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

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

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

參考網(wǎng)址：

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

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