為什么選擇Flutter

在使用Flutter開發之前，我是一個標準的iOS開發人員。我至今認為蘋果的整個體系，甚至整個技術框架都是業內最牛逼，最完善的，你甚至挑不出太多毛病。尤其在蘋果發布Swift并宣布開源后，蘋果的整個技術生態體系已到頂峰（Swift甚至可以用來做Web后端的開發，并且被谷歌人工智能團隊所采取作為首選語言）。但是，iOS開發中也有一些不足之處：

• 在Swift發布之前，所有的蘋果體系都是采用Objective-C，C，C++作為開發語言，尤其OC語法繁瑣，開發效率極低；
• 平臺限制嚴重，你需要準備以下必要設備：Mac電腦，iPhone手機，Apple開發者賬號（99美刀），一套組合拳下來大致需要2W人民幣；
• 崗位需求逐年降低，大部分的iOS開發都轉到了后端或者跨平臺開發。

基于以上原因，我嘗試了學習一些跨平臺的技術，最終確定了Flutter，著實讓人驚艷，以下為我學習中最直觀的感受：

• 你甚至可以完全不懂Android和iOS即可進行開發；
• Flutter SDK的分層架構清晰，入門簡單，上手快；
• 參考了React的狀態管理設計，只用關注用戶界面和業務邏輯，不用花功夫在狀態維護上；
• 第三方插件，組件豐富，90%以上的開發需求都能在Flutter插件&組件市場找到；

舒適區待的太久，災難降臨時，你已無從躲避。作為一個移動開發人員，你應該掌握一項必殺技，對我而言，Flutter是一個不錯的選擇。

本篇解決問題

如果以下問題都知道，可跳過本文檔。

• 對原生開發，Hybrid了解有多少？
• Flutter不同版本（Stable，Beta，Dev，Master）的特點？
• flutter doctor命令是做什么用的？
• 配置Android Studio還需要額外下載SDK嗎？為什么？
• 如何在Win上配置Flutter和Android環境變量？

原生開發、Hybrid、Flutter對比

在Flutter出現之前，App開發一般就兩種形式：純原生以及混合（Hybrid）開發。隨著Flutter在2018年發布第一個預覽版本后，儼然形成了三分天下的局面。

/ 原生開發 /

原生開發特指一套代碼跑在單獨的一個操作系統上，比如可以使用Java或者Kotlin開發Android平臺應用，使用Objective-C或者Swift開發iOS平臺應用，目前移動操作系統基本被Android和iOS瓜分。原生開發的顯著特點就是，可以通過代碼直接使用平臺所提供的SDK（軟件開發工具包，是一整套功能豐富的API集合），兩個平臺的工具集分為Android SDK與Cocoa Touch。

原生開發的優勢：

• 無障礙訪問平臺所有功能，如藍牙，錄音，定位，傳感器等；
• 因為直接訪問原生API，所以運行速度快，性能高，可以實現非常復雜的動畫效果和交互。

原生開發的缺點：

• 平臺特定，一套代碼只能在一端運行，所以對于企業而言，開發及維護成本相對較高；
• 原生開發，一旦有功能變動，需要重新打包發布，動態下發能力（熱更新）差。

/ Hybrid /

如今，移動互聯網逐漸成熟，純原生開發已經很難應對各種變態需求。針對開發成本，動態內容的問題，衍生了一些基于前端技術棧的一些跨平臺框架。

• H5 + 原生
• JavaScript開發 + 原生渲染

H5 + 原生的開發形式，目前是混合開發的主流。使用原生技術搭建APP框架，使用H5動態下發內容。由于H5代碼只需要一次開發，就能同時在Android和iOS兩個平臺運行，這也可以減小開發成本。也就是說，H5部分功能越多，開發成本就越小。我們稱這種H5+原生的開發模式為混合開發 ，采用混合模式開發的APP我們稱之為混合應用或Hybrid APP ，如果一個應用的大多數功能都是H5實現的話，我們稱其為Web APP 。混合開發的技術難點主要是原生和H5之間的交互。一般情況下，我們稱H5與原生交互的方式叫JSBridge。

JavaScript開發 + 原生渲染的開發方式目前特指Facebook開源的React Native以及阿里開源的Weex。其核心技術點就是：把DOM樹映射會原生的控件樹。框架會把DOM樹自動的轉化為不同平臺的控件樹，其最終還是調用的原生API來繪制。

混合開發的優點：

• 社區龐大，開發成本低；
• 使用前端技術框架，原生渲染，性能尚可；
• 支持熱更新；（目前iOS端有風險，熱更新應用禁止上架App Store）。

混合開發的缺點：

• 因為要和原生通信，難以勝任復雜的繪制和動畫工作；
• JS為腳本語言，解釋執行，性能和原生開發編譯后運行，有一定差距；
• 調用系統硬件功能非常麻煩。

/ Flutter /

鑒于Hybrid的一些缺點，谷歌開源了Flutter框架。Flutter是Google發布的一個用于創建跨平臺、高性能移動應用的框架。Flutter使用自繪引擎，使用自身的布局、繪制系統。

Flutter的優點：

• 生態活躍，目前GitHub的Flutter項目Star高達84.5K;
• 大廠支持；
• 采用Dart語言開發（后面會講一些Dart的特點，及Flutter中需要知道的Dart知識）；
• 開發效率高，Flutter同時支持JIT（解釋執行，開發模式下）和AOT（編譯后執行，生產環境）兩種運行模式。

盜用一個表格，三種開發方式的高下立判：

上表中開發語言主要指UI的開發語言。而開發效率，是指整個開發周期的效率，包括編碼時間、調試時間、以及排錯、兼容時間。動態化主要指是否支持動態下發代碼和是否支持熱更新。值得注意的是Flutter的Release包默認是使用Dart AOT模式編譯的，所以不支持動態化，但Dart還有JIT或snapshot運行方式，這些模式都是支持動態化的。官方文檔中有一張Flutter框架圖示，我覺得非常清晰的描述了整個框架的層級：

從上到下依次為：

• Flutter Framework是純Dart語言實現的SDK，是開發中用到的基礎庫，一般只接觸到此層級，封裝了很多常用的控件和動畫效果（類似于前端的各種元素標簽，甚至連布局系統都參考的Flex布局）；
• Flutter Engine是一個純C++實現的SDK，其中包括Skia引擎（二維繪圖引擎，Android底層繪圖引擎也是這玩意兒），Dart運行時，文字排版引擎等；調用Flutter Framewrok中的控件時，最終會走到Engine層，實現真正的繪制邏輯（該層已經是框架底層實現，除非PR，否則接觸不到）

從圖可以看出Flutter框架有良好的分層設計，實際開發中只用關注上層框架，大大節省開發時間。該部分只需要對Flutter有個大致認識即可。

開發系統與工具選擇

工欲善其事必先利其器。Flutter同時支持Windows和Mac OS，具體差別如下：

• Windows價格親民，但是無法開發iOS
• Mac價格較高，能同時開發iOS和Android

經濟條件允許的情況下推薦使用Mac進行開發。操作系統定下來后，還需要選擇一款開發工具，這里直接推薦使用Andorid Studio，優點如下：

• Android開發利器；
• Google官方推薦的Flutter開發IDE；調試，開發支持最全。

環境搭建

由于Flutter會同時構建Android和IOS兩個平臺的發布包，所以Flutter同時依賴Android SDK和iOS SDK，在安裝Flutter時也需要安裝相應平臺的構建工具和SDK。

/ Win下Flutter開發環境配置 /

由于Win下不支持iOS應用開發，所以Win下只需要配置好Android和Flutter的開發環境即可：

配置IDE

一共分為兩個步驟：

• 安裝Android Studio（Android Studio國內下載鏈接）；
• 為Android Studio安裝Flutter和Dart插件。

首先通過上面鏈接進入官網進行下載，安裝過程為下一步安裝法，無腦下一步即可：

注意：Android開發需要配置JDK，但是Android Studio已經內置了JDK，所以額外安裝JDK是可選的（如果需要安裝，強烈建議安裝JDK8.0，JDK11刪除了一些Jar包，如果全局配置了JAVA_HOME，版本為11的情況下，可能導致Flutter運行出現一些不必要的錯誤）。

安裝Flutter和Dart插件

打開Android Studio，打開File->Settings->Plugins，如下圖所示



安裝完成后，需要重新啟動Android Studio。開發工具安裝完畢后，需要配置Flutter開發環境。
Flutter開發環境的配置依賴以下工具：

• Windows Power Shell（win10內置，非win10可通過此鏈接進行下載）
• git（git for win下載地址）

設置鏡像

由于國內訪問Flutter可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到系統環境變量中：
PUB_HOSTED_URL=https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

win下具體配置步驟：右鍵我的電腦->選擇屬性->選擇高級系統設置->選擇環境變量，如下圖所示：

1、點擊高級系統設置

2、點擊環境變量

3、新建系統變量

4、添加此變量

5、另一個變量也添加上

添加完畢后，記得全部點確定，方可生效。

設置Android SDK的環境變量

當我們安裝完Android Studio后，Android SDK已經隨著AS一起安裝了，可以通過如下步驟查看Android SDK的路徑：打開Android Studio->File->Setting，搜索SDK，點擊后就可查看SDK的安裝路徑，如果沒有也可以重新進行安裝，如圖所示：

和設置鏡像的環境變量一樣，設置如下變量到系統變量中：
ANDROID_HOME=${Andorid SDK路徑}

如下圖所示：

另外需要額外添加Andorid SDK模擬器路徑以及工具路徑到Path環境變量中：

配置完成后，重啟電腦，然后打開cmd，輸入adb，如果打印以下信息，說明Android的環境變量配置成功：

如果運行出錯，請仔細核對Android SDK路徑是否配置錯誤。

安裝Flutter，配置Flutter環境變量

在Win下Flutter下載進行Flutter的安裝，本文檔使用的是1.9版本，更低版本不保證能穩定運行：

下載完成后，將安裝包zip解壓到你想安裝Flutter SDK的路徑，路徑層級不要過深，也不要放在需要高用戶權限的路徑下，推薦放在系統盤根目錄下。在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行，接下來，你就可以在Flutter命令行運行flutter命令了。

每次通過啟動文件來啟動非常繁瑣，可以吧flutter命令配置在系統環境變量Path下，如圖：

配置完成后，重啟電腦，在cmd中輸入flutter，運行如下信息，則flutter環境變量配置成功：

以上就是Android和Flutter環境配置的全部內容，接下來創建第一個Flutter項目。

通過Android Studio創建第一個Flutter項目

如圖操作即可：




點擊Finish后就創建了第一個Flutter項目。

Flutter不同版本的特點

Flutter SDK有多個分支，如beta、dev、master、stable，其中stable分支為穩定分支（日后有新的穩定版本發布后可能也會有新的穩定分支，如1.0.0），dev和master為開發分支，安裝flutter后，你可以運行flutter channel查看所有分支，帶"*"號的分支即你本地的Flutter SDK 跟蹤的分支，要切換分支，可以使用flutter channel beta或flutter channel master，Flutter官方建議跟蹤穩定分支，但你也可以跟蹤master分支，這樣可以查看最新的變化，但這樣穩定性要低的多。

作者 / Swift

四年軟件開發經驗，熟悉Objective-C/Swift/JavaScript/Java，對iOS開發有深入研究，目前從事前端和Flutter工作，歡迎QQ交流805433115。

/ 團隊介紹 /

我們是一家以信息數據研發和互聯網應用研發為主的互聯網公司。我們的核心服務目標，是助力企業級主體使用互聯網信息化模式改善企業效率和互聯網上云方式企業全面數據化，并在小程序以及PC端應用開發和融媒體運營兩個核心需求上，提供從策劃、運營、開發、執行、反饋全部整體解決方案。

總結

以上是生活随笔為你收集整理的【2020年APP-Flutter混合开发之路】01 - Flutter的初步思考和开发部署的全部內容，希望文章能夠幫你解決所遇到的問題。

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