一、Flutter的背景

近期flutter比較熱門，Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。Flutter的目標(biāo)是使同一套代碼同時(shí)運(yùn)行在Android和iOS系統(tǒng)上，并且擁有媲美原生應(yīng)用的性能。

在Flutter誕生之前，已經(jīng)有許多跨平臺(tái)UI框架的方案，比如基于WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

基于WebView的框架優(yōu)點(diǎn)很明顯，它們幾乎可以完全繼承現(xiàn)代Web開發(fā)的所有成果（豐富得多的控件庫(kù)、滿足各種需求的頁(yè)面框架、完全的動(dòng)態(tài)化、自動(dòng)化測(cè)試工具等等），當(dāng)然也包括Web開發(fā)人員，不需要太多的學(xué)習(xí)和遷移成本就可以開發(fā)一個(gè)App。同時(shí)WebView框架也有一個(gè)致命（在對(duì)體驗(yàn)&性能有較高要求的情況下）的缺點(diǎn)，那就是WebView的渲染效率和JavaScript執(zhí)行性能太差。再加上Android各個(gè)系統(tǒng)版本和設(shè)備廠商的定制，很難保證所在所有設(shè)備上都能提供一致的體驗(yàn)。

為了解決WebView性能差的問(wèn)題，以React Native為代表的一類框架將最終渲染工作交還給了系統(tǒng)，雖然同樣使用類HTML+JS的UI構(gòu)建邏輯，但是最終會(huì)生成對(duì)應(yīng)的自定義原生控件，以充分利用原生控件相對(duì)于WebView的較高的繪制效率。與此同時(shí)這種策略也將框架本身和App開發(fā)者綁在了系統(tǒng)的控件系統(tǒng)上，不僅框架本身需要處理大量平臺(tái)相關(guān)的邏輯，隨著系統(tǒng)版本變化和API的變化，開發(fā)者可能也需要處理不同平臺(tái)的差異，甚至有些特性只能在部分平臺(tái)上實(shí)現(xiàn)，這樣框架的跨平臺(tái)特性就會(huì)大打折扣。

Flutter則開辟了一種全新的思路，從頭到尾重寫一套跨平臺(tái)的UI框架，包括UI控件、渲染邏輯甚至開發(fā)語(yǔ)言。渲染引擎依靠跨平臺(tái)的Skia圖形庫(kù)來(lái)實(shí)現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺(tái)、不同設(shè)備的體驗(yàn)一致性，邏輯處理使用支持AOT的Dart語(yǔ)言，執(zhí)行效率也比JavaScript高得多。

Flutter同時(shí)支持Windows、Linux和macOS操作系統(tǒng)作為開發(fā)環(huán)境，并且在Android Studio和VS Code兩個(gè)IDE上都提供了全功能的支持。Flutter所使用的Dart語(yǔ)言同時(shí)支持AOT和JIT運(yùn)行方式，JIT模式下還有一個(gè)備受歡迎的開發(fā)利器“熱刷新”（Hot Reload），即在Android Studio中編輯Dart代碼后，只需要點(diǎn)擊保存或者“Hot Reload”按鈕，就可以立即更新到正在運(yùn)行的設(shè)備上，不需要重新編譯App，甚至不需要重啟App，立即就可以看到更新后的樣式。

在Flutter中，所有功能都可以通過(guò)組合多個(gè)Widget來(lái)實(shí)現(xiàn)，包括對(duì)齊方式、按行排列、按列排列、網(wǎng)格排列甚至事件處理等等。Flutter控件主要分為兩大類，StatelessWidget和StatefulWidget，StatelessWidget用來(lái)展示靜態(tài)的文本或者圖片，如果控件需要根據(jù)外部數(shù)據(jù)或者用戶操作來(lái)改變的話，就需要使用StatefulWidget。State的概念也是來(lái)源于Facebook的流行Web框架 React ，React風(fēng)格的框架中使用控件樹和各自的狀態(tài)來(lái)構(gòu)建界面，當(dāng)某個(gè)控件的狀態(tài)發(fā)生變化時(shí)由框架負(fù)責(zé)對(duì)比前后狀態(tài)差異并且采取最小代價(jià)來(lái)更新渲染結(jié)果。

?

二、Flutter的環(huán)境配置

上面講了這么多，我們也就對(duì)Flutter有了一定的認(rèn)識(shí)。接下來(lái)的一步就是進(jìn)行環(huán)境的配置，來(lái)進(jìn)行Flutter的開發(fā)。

在Flutter中文網(wǎng)有詳細(xì)的教程，按照步驟一步步走下去就可以了。我就按照我的安裝步驟一點(diǎn)點(diǎn)簡(jiǎn)單的說(shuō)一下吧。

?

（我是Mac系統(tǒng)，Windows系統(tǒng)的就不需要往下看了）

?

第一步，官網(wǎng)步驟是使用鏡像，但我測(cè)試是不需要的，我沒(méi)有使用鏡像也成功了。

第二步，是去下載官方的SDK。它會(huì)默認(rèn)下載到下載文件夾并解壓好。

第三步，這一步比較關(guān)鍵，需要進(jìn)行配置環(huán)境。這一步官網(wǎng)上寫的不是很詳細(xì)。我就詳細(xì)說(shuō)一下。

　 ? ? 我使用的是命令行

vim ~/.bash_profile

在里面新增一行

export PATH=/app/flutter/bin:$PATH

PATH后面輸入你的SDK的位置。就像下圖中紅線標(biāo)的位置。我最開始~/Downloads不行 就只能寫全了。

?

?在運(yùn)行沒(méi)有錯(cuò)誤后就可以運(yùn)行保存一下環(huán)境文件。

source ~/.bash_profile

這個(gè)時(shí)候應(yīng)該能運(yùn)行flutter命令了，我們運(yùn)行命令行：

flutter -h

就會(huì)看到類似這樣的圖

?

第四步、檢查環(huán)境

還是繼續(xù)命令行

flutter doctor

此圖是網(wǎng)上的，我的環(huán)境已經(jīng)弄好了，后面會(huì)貼出。這是沒(méi)有配置好的。

?

在這里我們看到iOS環(huán)境沒(méi)有裝好，英文比較好的話不用我說(shuō)了直接就能看懂，不好的就聽我說(shuō)吧。里面已經(jīng)寫得很詳細(xì)了。×后面都寫了怎么做。直接命令行copy運(yùn)行就行了。這個(gè)會(huì)跟網(wǎng)速有關(guān)。

?

我使用的開發(fā)工具是VS Code。配置方法很簡(jiǎn)單，安裝Flutter插件就行。

最后繼續(xù)運(yùn)行環(huán)境監(jiān)測(cè)就會(huì)成下面的樣子。

由于我沒(méi)有進(jìn)行過(guò)安卓開發(fā)，就沒(méi)裝安卓環(huán)境。

?

到了這一步，環(huán)境的配置就基本完成了。接下來(lái)就可以進(jìn)行開發(fā)了。?

?

參考文檔：

Flutter官網(wǎng)

Flutter中文網(wǎng)

國(guó)內(nèi)少有的Flutter干貨分享：Flutter的原理及美團(tuán)的實(shí)踐！

Flutter教程

?

轉(zhuǎn)載于:https://www.cnblogs.com/weicyNo-1/p/10431371.html

總結(jié)

以上是生活随笔為你收集整理的【flutter】学习之路（一）环境的搭建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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