Flutter技術(shù)調(diào)研及可行性結(jié)論

前言：

隨著Flutter的快速發(fā)展，以及在國內(nèi)外應用中作為跨平臺方案使用的普及，F(xiàn)lutter吸引了無數(shù)開發(fā)者的眼光。我們也對Flutter從以下方向進行了技術(shù)方面的調(diào)研，并在項目中進行了接入開發(fā)實戰(zhàn)，最終給出如下的可行性結(jié)論。

調(diào)研方向：

  • Flutter介紹
  • 跨平臺UI/API調(diào)用
  • 項目混編開發(fā)實踐
  • 測試調(diào)優(yōu)
  • 打包部署
  • 與原生體驗的比較
  • 熱更新
  • 第三方庫支持
  • 學習成本
  • 學習資源參考資料等

1、Flutter介紹

  • 快速開發(fā)：Flutter 的熱重載可以快速地進行測試、構(gòu)建UI、添加功能并更快地修復錯誤。
  • 富有表現(xiàn)力，漂亮的用戶界面：自帶的 Material Design 和 Cupertino（iOS風格）widget、豐富的 motion API、平滑而自然的滑動效果。
  • 響應式框架：使用 Flutter 的現(xiàn)代、響應式框架，和一系列基礎 widget，輕松構(gòu)建您的用戶界面。
  • 訪問本地功能和 SDK：Flutter 可以復用現(xiàn)有的 Java、Swift 或 ObjC代碼，訪問 iOS 和 Android 上的原生系統(tǒng)功能和系統(tǒng) SDK。
  • 統(tǒng)一的應用開發(fā)體驗：Flutter 擁有豐富的工具和庫，可以幫助開發(fā)者從單個代碼庫為多個平臺構(gòu)建漂亮而快速的應用程序，輕松地同時在 iOS 和 Android 系統(tǒng)中實現(xiàn)想法和創(chuàng)意。
  • 原生性能：Flutter 包含了許多核心的 widget，如滾動、導航、圖標和字體等，這些都可以在 iOS 和 Android 上達到原生應用一樣的性能。

2、跨平臺程度，UI/平臺對應的API調(diào)用

組件UI：
  • 布局
  • 組件對比（Flutter 與 Android/iOS）
  • 新增/移除組件
  • 動畫
  • Draw Canvas
  • 自定義Widget
  • 點擊，手勢，觸摸
  • 主題文字樣式
  • 表單輸入
API調(diào)用：
  • 頁面切換/導航/回退棧
  • 線程，異步
  • 網(wǎng)絡
  • 資源依賴，圖片，多分辨率等
  • 字符串存儲，語言本地化
  • 生命周期
  • 訪問GPS 相機等原生功能
  • 數(shù)據(jù)庫，本地存儲
  • 通知
遇到的問題及解決方案：
  • 問題：默認是MD風格組件，對于iOS有Cupertino風格的組件，兩者不統(tǒng)一。解決方案： 設計統(tǒng)一風格，個別樣式需要寫if else
  • 比如無法addSubView 只能寫if else
  • 比如沒有相對布局等
跨平臺相關(guān)總結(jié)：

Flutter很好的提供了，頁面布局導航，動畫，手勢，交互，網(wǎng)絡，線程，數(shù)據(jù)庫，生命周期管理，與原生平臺通信等跨平臺相關(guān)，幾乎所有所需要功能的支持和實現(xiàn)。同時官方和社區(qū)提供的大量插件，為跨平臺的功能開發(fā)和實現(xiàn)提供了很大的便捷。

3、與現(xiàn)有項目兼容度，可混合/兼容

主要內(nèi)容：
  • 目前國內(nèi)/國外 Flutter實踐現(xiàn)狀
  • 安裝/開發(fā)環(huán)境部署
  • 簡單講解一個Flutter頁面的結(jié)構(gòu)及實現(xiàn)方式
  • Flutter獨立開發(fā)/混編開發(fā)流程（平臺集成，插件開發(fā)）
  • 簡單的混合開發(fā)示例接入Native，能夠和Native層有數(shù)據(jù)交互。
  • 混合開發(fā)時角色定位
混編開發(fā):
  • 集成方式
  • 開發(fā)模式
  • 工程管理
  • 原生端與Dart端通信
  • 混合棧及路由
  • 調(diào)試
  • 穩(wěn)定性保證
遇到的問題及解決方案:
  • So庫兼容性問題
  • 包體大小問題
  • 資源共享問題
  • 混合棧及路由中的問題
  • Flutter模塊角色定位問題： 比如網(wǎng)絡請求,藍牙請求 該使用Native庫/ Flutter庫？
項目混合開發(fā)相關(guān)總結(jié)：

Flutter完全支持項目的混合開發(fā)，但在涉及到混合棧堆疊的時候，相關(guān)便捷性會降低（比如Native頁面-->Dart頁面-->Native頁面-->Dart頁面 ）

4、測試調(diào)優(yōu)

  • Dart分析器：分析代碼并發(fā)現(xiàn)潛在錯誤
  • Dart Observatory (語句級的單步調(diào)試和分析器) ： 使用語句級單步調(diào)試器連接到您的應用程序
  • 調(diào)試模式斷言 ： 使用 Flutter 的 “debug” 模式，Dart assert 語句將被啟用。
  • 調(diào)試應用程序?qū)樱篎lutter框架的每一層都提供了將其當前狀態(tài)或事件 dump 到控制臺（使用 debugPrint）的功能。
  • 可視化調(diào)試：設置 [debugPaintSizeEnabled]為 true 來調(diào)試布局問題
  • 調(diào)試動畫：減慢動畫的速度來調(diào)試動畫調(diào)試
  • 調(diào)試性能問題
    • 測量 app 啟動時間
    • 跟蹤 Dart 代碼性能
    • PerformanceOverlay

......

  • 使用原生調(diào)試器調(diào)試代碼

......

Flutter提供了很多工具和特性，幫助調(diào)試Flutter應用程序，保證開發(fā)者代碼的健壯性和應用程序的性能表現(xiàn)。

5、打包部署

Flutter提供為Android 和 iOS平臺進行多渠道配置，發(fā)布，持續(xù)構(gòu)建和部署的方法。

6、與原生體驗的比較

  • Flutter在進行組件界面的渲染時，不需要經(jīng)過iOS平臺或者Android平臺，而是直接通過自己的Skia渲染引擎繪制在畫布上，其渲染效率得到大幅提高，在使用體驗，性能，流暢度等方面非常接近原生應用。

7、熱更新

  • iOS不支持熱更新（Apple官方審核和限制）
  • Android的熱更新已列入官方2019的產(chǎn)品規(guī)劃，未來會支持，但現(xiàn)在還不支持

8、第三方庫支持

網(wǎng)絡庫Http Dio
數(shù)據(jù)庫Sqlite , SharePreference

圖片庫Cached network image
DeviceInfo
Firebase
WebView通信
Webview Plugin
Image_Picker
Date_Picker
Url_launcher
電池
相機
......

在官方插件庫Pub上提供了官方和開發(fā)者開發(fā)的大量插件，以滿足開發(fā)者的日常開發(fā)需要。目前已有大量開發(fā)者在使用這些插件，開發(fā)者也可以自己開發(fā)相關(guān)插件并上傳供其他人使用。

9、學習成本，（開發(fā)/部署）

  • Dart語言
  • Flutter相關(guān)組件，布局...
Dart的語法個人覺得比較簡單，很像是Java+Kotlin的結(jié)合體。但是Flutter本著萬物皆為Widget的原則，提供了接近30多種不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十種，在布局方面的學習曲線較長，學習成本較高。

10、學習資源，參考資料等

官方文檔：https://flutter.cn
Widget目錄：https://flutter.cn/docs/reference/widgets
API文檔：https://docs.flutter.cn/
插件庫Packages：https://pub.flutter-io.cn/flutter
官方維護Plugins : https://github.com/flutter/plugins
Flutter Wiki： https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
iOS風格組件：https://flutter.cn/docs/development/ui/widgets/cupertino
Samples : https://github.com/flutter/samples/blob/master/INDEX.md
各App Flutter實踐總結(jié)...

11、Flutter在國內(nèi)的應用及相關(guān)開發(fā)實踐總結(jié)：

閑魚：https://www.zhihu.com/org/xian-yu-ji-zhu/posts?page=1
今日頭條：https://mp.weixin.qq.com/s/-vyU1JQzdGLUmLGHRImIvg
美團：https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html
網(wǎng)易新聞：https://mp.weixin.qq.com/s/a0in4DqB8Bay046knkRr1g
愛奇藝： https://mp.weixin.qq.com/s/f4j3_NGxjAjqNmecc5XrjA
餓了么：https://juejin.im/post/5b8d46c3e51d4538e710bc78
京東，高德，Now直播等...

12、Flutter開發(fā)角色定位：

  • 適合開發(fā)獨立項目（純Flutter項目）
  • 適合純互聯(lián)網(wǎng)App開發(fā) （不需過多依賴平臺/硬件）
  • Flutter不適合混合棧堆疊過多的情況（Native-->Dart-->Native-->Dart）
  • Flutter不適合平臺/硬件強相關(guān)的功能開發(fā)。在這種情況下，F(xiàn)lutter只適合做頁面，使用Native端的數(shù)據(jù)進行渲染展示。
  • 在混合項目開發(fā)時，F(xiàn)lutter定位接近H5 , 但是比H5適用范圍更廣，性能表現(xiàn)和用戶體驗更好。

13、Flutter槽點（只列舉個人覺得最影響的）:

  • Flutter提供接近30多種不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十種，在布局方面的學習曲線較長，學習成本較高。
  • Flutter使用代碼方式寫布局。對于Android開發(fā)者來說，可能會難以接受和適應，在代碼類中多了幾百行布局代碼的情況
  • 目前覺得最困擾的地方在于：使用Flutter進行混合項目開發(fā)時，之前原生實現(xiàn)的通用業(yè)務基礎庫（網(wǎng)絡庫適配，數(shù)據(jù)庫，圖片庫），通用組件和UI基礎庫（這個是最耗時的）等，都需要再實現(xiàn)一遍，這和使用Flutter提高開發(fā)效率的目標相違背。

14、可行性結(jié)論 （得分越高越好，滿分為5分）:

跨平臺支持(UI組件/API) 項目兼容度 學習成本 與原生體驗的比較 熱更新 第三方庫支持 市場應用情況
分數(shù) 4.5 4 3 5 1 4 4

結(jié)合上述的調(diào)研和分析，使用Flutter進行項目的開發(fā)是完全可行的，而且也是比較有發(fā)展前景的。不過如何確定Flutter和Native端開發(fā)的邊界，會是一個非常重要且需要慎重思考的問題。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容