【flutter】學習之路（一）環境的搭建

1、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風格的框架中使用控件樹和各自的狀態來構建界面，當某個控件的狀態發生變化時由框架負責對比先後狀態差別而且採起最小代價來更新渲染結果。

 

2、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教程