Flutter Boost3.0初探

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着Flutter的發展，國內越來越多的App開始使用Flutter。爲了降低風險，大部分App採用漸進式方式引入Flutter，在App裏選幾個頁面用Flutter來編寫，但都碰到了相同的問題，在原生頁面和Flutter頁面共存的情況下，如何管理路由？官方沒有提供這樣的解決方案，而FlutterBoost就是爲了解決這個問題而生。FlutterBoost從開源後受到了社區開發者的歡迎，已經有很多App使用了FlutterBoost，社區開發者也很活躍，提了很多Issue和PR。感謝開發者的一路支持和包容，無論是意見反饋還是吐槽，我們都會認真看，會持續關注Issue。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"使命"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost的使命是讓開發者非常簡單的在原生App中開發Flutter頁面。FlutterBoost做爲Flutter sdk上層的解決方案，有一定的侷限性，我們需要依賴sdk更多的開放能力。因此我們同時在做兩件事情："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"推動Flutter官方開放更多的底層接口"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們參與Flutter 組織的 Multiple Flutters[1] 的討論。也多次發郵件給Flutter團隊反饋sdk的Bug和一些無法支持的應用場景。很欣慰的是在Flutter 2.0 上看到混合開發的重大進展，Flutter2.0 提供了 FlutterEngineGroup，FlutterEngineGroup創建一個新Engine，內存只增加180k，這個給我們提供了很多想象空間。但FlutterEngineGroup最大的問題是多Engine之間不是isolate層面的內存共享。從目前看FlutterBoost這種單Engine內存共享的方式還不能被完全取代。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost的升級"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然開源社區很活躍，star很多，使用者也很多，但FlutterBoost離優秀的開源項目還很遠。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"FlutterBoost的問題"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"梳理了一下問題："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"穩定性，每次Flutter發佈一個stable版本，開發者會來問我，FlutterBoost針對新版本適配了沒有？他們準備升級新版本，需要FlutterBoost能適配最新版本。而我每次都要針對新版本拉2個新分支（Androidx 和Support分支），進行適配。時間長了，會產生很多分支，這個給分支管理帶來很大的成本，比如在某個分支上修復的issue要同步到其他分支，一不小心就會遺漏同步。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"社區的issue沒有收斂的趨勢。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設計過於複雜，概念太多。這讓一個新手看FlutterBoost的代碼很喫力。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些問題促使我們重新梳理設計，爲了徹底解決這些頑固的問題，我們做一次大升級，我們把這次升級命名爲FlutterBoost 3.0（上一次升級是2.0）"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"FlutterBoost3.0做了什麼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"針對上面的問題，我們做了幾個事項"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不侵入引擎，兼容Flutter的各種版本，Flutter sdk的升級不需要再升級FlutterBoost，極大降低升級成本。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不區分Androidx和Support分支。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡化架構和接口，和FlutterBoost2.0比，代碼減少了一半。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雙端統一，包括接口和設計上的統一。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"支持打開Flutter頁面，不再打開容器場景。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面生命週期變化通知更方便業務使用。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決了2.0中的遺留問題，例如，Fragment接入困難、頁面關閉後不能傳遞數據、dispose不執行，內存佔用過高等。"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"架構圖"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/7b\/7b28e1ff92a3dd9e965bc7a5b84a7357.png","alt":"圖片","title":"null","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost插件分爲平臺和Dart兩端，中間通過Message Channel連接。平臺側提供了Flutter引擎的配置和管理、Native容器的創建\/銷燬、頁面可見性變化通知，以及Flutter頁面的打開\/關閉接口等。而Dart側除了提供類似原生Navigator的頁面導航接口的能力外，還負責Flutter頁面的路由管理"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"不入侵引擎"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了解決官方引擎複用引起的問題，FlutterBoost2.0拷貝了Flutter引擎Embedding層的一些代碼進行改造，這使得後期的升級成本極高。而FlutterBoost3.0採用繼承的方式擴展FlutterActivity\/FlutterFragment等組件的能力，並且通過在適當時機給Dart側發送appIsResumed消息解決引擎複用時生命週期事件錯亂導致的頁面卡死問題。FlutterBoost3.0 也兼容最新的官方發佈的 Flutter 2.0。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"不區分Androidx和Support分支"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost2.0通過自己實現FlutterActivityAndFragmentDelegate.Host接口來擴展FlutterActivity和FlutterFragment的能力，而getLifecycle是必須實現的接口，這就導致對androidx的依賴。這也是爲什麼FlutterBoostView的實現沒有被放入FlutterBoost3.0插件中的原因。而FlutterBoost3.0通過繼承的方式擴展FlutterActivity\/FlutterFragment的能力的額外收益就是，可以做到不依賴androidx。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"雙端設計統一，接口統一"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多Flutter開發者只會一端，只會Android 或者只會IOS，但他需要接入雙端，所以雙端統一能降低他的 學習成本和接入成本。FlutterBoost3.0，在設計上 Android和IOS都做了對齊，特別接口上做到了參數級的對齊。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"支持 “打開flutter頁面不再打開容器” 場景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在很多場景下，Flutter 頁面跳轉Flutter 頁面，這個時候可以不需要再打開容器。不打開容器，能節省內存開銷。在FlutterBoost3.0上，打開容器和不打開容器的區別表現在用戶接口上僅僅是withContainer參數是否爲true就好。代碼如下："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"InkWell(\n child: Container(\n color: Colors.yellow,\n child: Text(\n '打開外部路由',\n style: TextStyle(fontSize: 22.0, color: Colors.black),\n )),\n onTap: () => BoostNavigator.of().push(\"flutterPage\",\n arguments: {'from': widget.uniqueId}),\n),\nInkWell(\n child: Container(\n color: Colors.yellow,\n child: Text(\n '打開內部路由',\n style: TextStyle(fontSize: 22.0, color: Colors.black),\n )),\n onTap: () => BoostNavigator.of().push(\"flutterPage\",\n withContainer: true,\n arguments: {'from': widget.uniqueId}),\n)\n"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"生命週期的精準通知"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在FlutterBoost2.0上，每個頁面都會收到頁面生命週期通知，而FlutterBoost3.0只會通知頁面可見性實際發生了變化的頁面，接口也更符合flutter的設計。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Top Issue 解決"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於反饋比較多的issue進行了統計和歸類，主要解決了以下issue"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面關閉後參數的傳遞，之前只有iOS支持，android不支持，目前在dart側實現，Ios 和Android 都支持"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決了Android 狀態欄字體和顏色問題。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決了頁面回退willpopscope不起作用問題。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決了不在棧頂的頁面也收到生命週期回調的問題"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決了多次setState耗性能問題。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"提供了Framgent 多種接入方式的Demo，方便tab 場景的接入。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"生命週期的回調代碼，可以用戶代碼裏面with的方式接入，使用更簡單。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"全面簡化了，接入成本，包括 dart側，android側和ios"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"豐富了demo，包含了基本場景，方便用戶接入 和測試迴歸。"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"FlutterBoost3.0 接入和使用"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"接入方式"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"flutter_boost:\n git:\n url: 'https:\/\/github.com\/alibaba\/flutter_boost.git'\n ref: 'v3.0-beta.3' \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前FlutterBoost3.0 發佈了beta版本，目前屬於公測階段。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"接口文檔"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"詳細請看 https:\/\/github.com\/alibaba\/flutter_boost"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"對Flutter2.0 新特性 FlutterEngineGroup"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost 是採用單Engine的方案，所以整個App是在同一個Isolate下，內存共享，而FlutterEngineGroup是採用多Engine方案，每個頁面是一個Engine，或者一個頁面內包含多個Engine，每個Engine對應一個Isolate，內存不共享。從FlutterEngineGroup生成的FlutterEngine ，內存只增加180k。因爲它對常用資源進行共享（例如 GPU 上下文、字體度量和隔離線程的快照），加快首次渲染的速度、降低延遲並降低內存佔用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那是不是有了FlutterEngineGroup就不需要FlutterBoost了？從目前看FlutterBoost這種單Engine的方案，有一定的合理性，還不能完全被替代。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"FlutterBoost的未來發展"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後續會繼續做這3件事情："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FlutterBoost3.0會繼續在單Engine方向完善和優化，讓他更穩定，支持更多場景。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"持續和Flutter 官方溝通，包括能否支持FlutterEngineGroup在isolate層面的內存共享。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"探索Flutter2.0 多engine方案下新的混合棧。"}]}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"References"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"[1]"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Multiple Flutters: "},{"type":"text","marks":[{"type":"italic"}],"text":"https:\/\/docs.google.com\/document\/d\/1fdKRufqUzQvERcqNIUSq-GdabXc4k8VIsClzRElJ6KY\/edit"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文轉載自：閒魚技術（ID：XYtech_Alibaba）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文鏈接："},{"type":"link","attrs":{"href":"https:\/\/mp.weixin.qq.com\/s\/49h8FVPhnJSHo2brR0K9zw","title":"xxx","type":null},"content":[{"type":"text","text":"Flutter Boost3.0初探"}]}]}]}