Flutter(一)——認識Flutter以及搭建開發環境

 

本文目錄

• 什麼是Flutter
• Flutter開發優點
• 對比其餘技術
• Android Studio搭建Flutter開發環境
• VSCode搭建Flutter開發環境

 

什麼是Flutter

Flutter是谷歌新推出的一套跨平臺的，開源UI框架，同時支持Android與IOS開發，對於之前須要用兩種語言分別開發IOS，Android程序與來講，無疑簡單了許多。並且Flutter是將來新操做系統Fuchsia的默認開發軟件，谷歌目前正在大力推廣flutter，能夠說是目前比較前沿的開發工具。

Flutter開發優點

（1）跨平臺性：真正作了一套代碼能夠同時在Android和IOS上運行，避免太高的維護成本，節省測試，開發資源。

（2）經過「自繪UI+原生系統」實現高幀率的流暢UI。不使用WebView這種比較老的開發模式，而使用Skia做爲2D渲染引擎，使用Dart語言做爲運行，以及使用Text做爲文字排版引擎。

（3）支持開發過程當中的熱重載。在開發過程當中，只須要保存操做步驟就能夠刷新Flutter項目，提升開發效率。

（4）對開發環境要求不高，能夠使用Android Studio，也能夠使用VSCode。

（5）高性能：直接調用系統的API繪製UI，所以，性能更接近原生。

（6）學習成本低：若是以前學過RN，那麼在學習Flutter也會很快就能掌握。若是具備前端或者純原生開發經驗，則學起來也比較省力。

對比其餘技術

技術類型	UI渲染方式	性能	開發效率	動態化	取值
HTML5+原生	WebView渲染	通常	高	支持	Cordova，Ionic
JavaScript+原生渲染	原生控件渲染	好	高	支持	RN，Weex
自繪UI+原生	調用系統API渲染	好	Flutter高，Qt低	默認不支持	Qt，Flutter

博主作了一個表格，詳細對比了其餘技術的優缺點，相信很是直觀了，一目瞭然。

Android Studio搭建Flutter開發環境

（1）首先打開Android Studio，而後選擇Setting-plugins，搜索框輸入Flutter，而後點擊安裝，以下圖所示：

(2)安裝完成以後，重啓Android Studio會看到以下界面，點擊建立Flutter項目：

(3)咱們點擊start a new Flutter project後，會發現要咱們輸入Flutter SDK目錄，咱們先只安裝了Android開發的插件，並無下載Flutter SDK，因此咱們須要選擇一個目錄，點擊後面的install SDK（flutter sdk path後面有下載按鈕，這裏博主已經點擊下載因此消失了，下面顯示下載進度）：

(4)下載完成以後，就能夠建立項目了，如圖：

(5)這樣建立並不能運行到手機中，由於你沒有配置環境變量，因此咱們還須要配置兩個環境變量，首先在系統環境變量中添加Android_HOME也就是Android的SDK目錄：

其次，咱們須要在系統環境變量的Path中，添加flutter的環境變量：

若是你配置後不知道本身是否成功，能夠在CMD中輸入以下命令，若是出現下圖提示，就表示環境已經搭建完成， 能夠運行Flutter到手機上顯示了：

其實這裏的腳本命令很是簡單，就是用醫生檢查如下flutter環境是否搭建成功。這樣咱們的Android Studio的flutter項目運行環境就搭建完成了，咱們能夠看看默認建立項目的運行效果，以及它的圖標：

VSCode搭建Flutter開發環境

除了Android Studio外，若是你一直時前端的開發人員，而且一直使用VSCode，如今想開發手機應用，也能夠直接使用VSCode進行開發，它的搭建步驟以下：

（1）打開VSCode選擇菜單中的View-Command Palette，會出現一個搜索框，而後輸入install，選擇Extensions：Install Extension。

(2)點擊後，會出現以下界面，而後輸入Flutter進行安裝

(3)安裝完成後，一樣經過第一步View-Command Palette搜索Flutter，而後點擊Flutter：New Project建立項目進行開發。

由於博主後續講解的都是Android的手機開發，因此後續都以Android Studio開發Flutter爲主。