前言：
隨著Flutter的快速發(fā)展明肮，以及在國內(nèi)外應(yīng)用中作為跨平臺方案使用的普及菱农，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)
- 打包部署
- 與原生體驗的比較
- 熱更新
- 第三方庫支持
- 學(xué)習(xí)成本
- 學(xué)習(xí)資源參考資料等
1秫舌、Flutter介紹
- 快速開發(fā)：Flutter 的熱重載可以快速地進行測試的妖、構(gòu)建UI、添加功能并更快地修復(fù)錯誤足陨。
- 富有表現(xiàn)力嫂粟，漂亮的用戶界面：自帶的 Material Design 和 Cupertino（iOS風(fēng)格）widget、豐富的 motion API墨缘、平滑而自然的滑動效果星虹。
- 響應(yīng)式框架：使用 Flutter 的現(xiàn)代、響應(yīng)式框架镊讼，和一系列基礎(chǔ) widget宽涌，輕松構(gòu)建您的用戶界面。
- 訪問本地功能和 SDK：Flutter 可以復(fù)用現(xiàn)有的 Java狠毯、Swift 或 ObjC代碼护糖，訪問 iOS 和 Android 上的原生系統(tǒng)功能和系統(tǒng) SDK。
- 統(tǒng)一的應(yīng)用開發(fā)體驗：Flutter 擁有豐富的工具和庫嚼松，可以幫助開發(fā)者從單個代碼庫為多個平臺構(gòu)建漂亮而快速的應(yīng)用程序嫡良，輕松地同時在 iOS 和 Android 系統(tǒng)中實現(xiàn)想法和創(chuàng)意。
- 原生性能：Flutter 包含了許多核心的 widget献酗，如滾動寝受、導(dǎo)航、圖標(biāo)和字體等罕偎，這些都可以在 iOS 和 Android 上達到原生應(yīng)用一樣的性能很澄。
2、跨平臺程度颜及，UI/平臺對應(yīng)的API調(diào)用
組件UI：
- 布局
- 組件對比（Flutter 與 Android/iOS）
- 新增/移除組件
- 動畫
- Draw Canvas
- 自定義Widget
- 點擊甩苛，手勢，觸摸
- 主題文字樣式
- 表單輸入
API調(diào)用：
- 頁面切換/導(dǎo)航/回退棧
- 線程俏站，異步
- 網(wǎng)絡(luò)
- 資源依賴讯蒲，圖片，多分辨率等
- 字符串存儲肄扎，語言本地化
- 生命周期
- 訪問GPS 相機等原生功能
- 數(shù)據(jù)庫墨林，本地存儲
- 通知
遇到的問題及解決方案：
- 問題：默認是MD風(fēng)格組件赁酝，對于iOS有Cupertino風(fēng)格的組件，兩者不統(tǒng)一旭等。解決方案： 設(shè)計統(tǒng)一風(fēng)格酌呆，個別樣式需要寫if else
- 比如無法addSubView 只能寫if else
- 比如沒有相對布局等
跨平臺相關(guān)總結(jié)：
Flutter很好的提供了，頁面布局導(dǎo)航搔耕，動畫隙袁，手勢，交互度迂，網(wǎng)絡(luò)藤乙，線程，數(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)絡(luò)請求,藍牙請求 該使用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)試器連接到您的應(yīng)用程序
- 調(diào)試模式斷言 ： 使用 Flutter 的 “debug” 模式瞬雹，Dart assert 語句將被啟用昧谊。
- 調(diào)試應(yīng)用程序?qū)樱篎lutter框架的每一層都提供了將其當(dāng)前狀態(tài)或事件 dump 到控制臺（使用 debugPrint）的功能。
- 可視化調(diào)試：設(shè)置 [
debugPaintSizeEnabled]為 true 來調(diào)試布局問題 - 調(diào)試動畫：減慢動畫的速度來調(diào)試動畫調(diào)試
- 調(diào)試性能問題
- 測量 app 啟動時間
- 跟蹤 Dart 代碼性能
- PerformanceOverlay
......
- 使用原生調(diào)試器調(diào)試代碼
......
Flutter提供了很多工具和特性酗捌，幫助調(diào)試Flutter應(yīng)用程序呢诬，保證開發(fā)者代碼的健壯性和應(yīng)用程序的性能表現(xiàn)。
5胖缤、打包部署
Flutter提供為Android 和 iOS平臺進行多渠道配置尚镰，發(fā)布，持續(xù)構(gòu)建和部署的方法哪廓。
6狗唉、與原生體驗的比較
- Flutter在進行組件界面的渲染時，不需要經(jīng)過iOS平臺或者Android平臺撩独，而是直接通過自己的Skia渲染引擎繪制在畫布上敞曹，其渲染效率得到大幅提高，在使用體驗综膀，性能澳迫，流暢度等方面非常接近原生應(yīng)用。
7剧劝、熱更新
- iOS不支持熱更新（Apple官方審核和限制）
- Android的熱更新已列入官方2019的產(chǎn)品規(guī)劃橄登，未來會支持，但現(xiàn)在還不支持
8讥此、第三方庫支持
- 官方插件 https://github.com/flutter/plugins
- Pub https://pub.flutter-io.cn
- Github上列的插件
網(wǎng)絡(luò)庫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、學(xué)習(xí)成本他巨，（開發(fā)/部署）
- Dart語言
- Flutter相關(guān)組件充坑，布局...
Dart的語法個人覺得比較簡單，很像是Java+Kotlin的結(jié)合體染突。但是Flutter本著萬物皆為Widget的原則捻爷，提供了接近30多種不同的布局widget，日常中用的也有如Container份企、Padding也榄、Center、Align司志、Row甜紫、Column、Stack俐芯、ListView等上十種棵介，在布局方面的學(xué)習(xí)曲線較長，學(xué)習(xí)成本較高吧史。
10邮辽、學(xué)習(xí)資源，參考資料等
官方文檔：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風(fēng)格組件：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)的應(yīng)用及相關(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等上十種福稳，在布局方面的學(xué)習(xí)曲線較長，學(xué)習(xí)成本較高瑞侮。
- Flutter使用代碼方式寫布局灵寺。對于Android開發(fā)者來說，可能會難以接受和適應(yīng)区岗，在代碼類中多了幾百行布局代碼的情況
- 目前覺得最困擾的地方在于：使用Flutter進行混合項目開發(fā)時略板，之前原生實現(xiàn)的通用業(yè)務(wù)基礎(chǔ)庫（網(wǎng)絡(luò)庫適配，數(shù)據(jù)庫慈缔，圖片庫）叮称，通用組件和UI基礎(chǔ)庫（這個是最耗時的）等，都需要再實現(xiàn)一遍藐鹤，這和使用Flutter提高開發(fā)效率的目標(biāo)相違背瓤檐。
14、可行性結(jié)論 （得分越高越好娱节，滿分為5分）:
| 跨平臺支持(UI組件/API) | 項目兼容度 | 學(xué)習(xí)成本 | 與原生體驗的比較 | 熱更新 | 第三方庫支持 | 市場應(yīng)用情況 | |
|---|---|---|---|---|---|---|---|
| 分數(shù) | 4.5 | 4 | 3 | 5 | 1 | 4 | 4 |
結(jié)合上述的調(diào)研和分析挠蛉，使用Flutter進行項目的開發(fā)是完全可行的，而且也是比較有發(fā)展前景的肄满。不過如何確定Flutter和Native端開發(fā)的邊界谴古，會是一個非常重要且需要慎重思考的問題。
