一、Flutter的背景

近期flutter比較熱門，Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。Flutter的目標是使同一套代碼同時運行在Android和iOS系統上，并且擁有媲美原生應用的性能。

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

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

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

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

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

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

?

二、Flutter的環境配置

上面講了這么多，我們也就對Flutter有了一定的認識。接下來的一步就是進行環境的配置，來進行Flutter的開發。

在Flutter中文網有詳細的教程，按照步驟一步步走下去就可以了。我就按照我的安裝步驟一點點簡單的說一下吧。

?

（我是Mac系統，Windows系統的就不需要往下看了）

?

第一步，官網步驟是使用鏡像，但我測試是不需要的，我沒有使用鏡像也成功了。

第二步，是去下載官方的SDK。它會默認下載到下載文件夾并解壓好。

第三步，這一步比較關鍵，需要進行配置環境。這一步官網上寫的不是很詳細。我就詳細說一下。

　 ? ? 我使用的是命令行

vim ~/.bash_profile

在里面新增一行

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

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

?

?在運行沒有錯誤后就可以運行保存一下環境文件。

source ~/.bash_profile

這個時候應該能運行flutter命令了，我們運行命令行：

flutter -h

就會看到類似這樣的圖

?

第四步、檢查環境

還是繼續命令行

flutter doctor

此圖是網上的，我的環境已經弄好了，后面會貼出。這是沒有配置好的。

?

在這里我們看到iOS環境沒有裝好，英文比較好的話不用我說了直接就能看懂，不好的就聽我說吧。里面已經寫得很詳細了。×后面都寫了怎么做。直接命令行copy運行就行了。這個會跟網速有關。

?

我使用的開發工具是VS Code。配置方法很簡單，安裝Flutter插件就行。

最后繼續運行環境監測就會成下面的樣子。

由于我沒有進行過安卓開發，就沒裝安卓環境。

?

到了這一步，環境的配置就基本完成了。接下來就可以進行開發了。?

?

參考文檔：

Flutter官網

Flutter中文網

國內少有的Flutter干貨分享：Flutter的原理及美團的實踐！

Flutter教程

?

轉載于:https://www.cnblogs.com/weicyNo-1/p/10431371.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。