將 Flutter 新增到現有應用
將 Flutter 作為庫新增到現有的 Android 或 iOS 應用。
Add-to-app
#如果您正在從頭開始編寫新的應用程式,那麼使用 Flutter 入門非常容易。但是,如果您已經有一個非 Flutter 編寫的應用程式,並且從頭開始重新編寫是不切實際的呢?
對於這些情況,Flutter 可以逐步整合到您現有的應用程式中,作為一個模組。此功能稱為“add-to-app”。該模組可以匯入到您現有的應用程式中,以使用 Flutter 渲染應用程式的一部分,而其餘部分可以使用現有技術渲染。這種方法還可以透過利用 Dart 的可移植性和與其他語言的互操作性來執行共享的非 UI 邏輯。
Add-to-app 目前支援 Android、iOS 和 Web。
Flutter 支援兩種 add-to-app 模式
- 多引擎:支援 Android 和 iOS,允許執行一個或多個 Flutter 例項,每個例項渲染嵌入到宿主應用程式中的一個 widget。每個例項都是一個獨立的 Dart 程式,與其他程式隔離執行。擁有多個 Flutter 例項允許每個例項在資源消耗最小的情況下維護獨立的應用程式和 UI 狀態。更多資訊請參見 多個 Flutter 頁面。
- 多檢視:支援 Web,允許建立多個 FlutterView,每個檢視渲染嵌入到宿主應用程式中的一個 widget。在這種模式下,只有一個 Dart 程式,所有檢視和 widget 都可以共享物件。
Add-to-app 支援整合任意大小的多個 Flutter 檢視,支援各種用例。兩個最常見的用例是
- 混合導航堆疊:應用程式由多個螢幕組成,其中一些螢幕由 Flutter 渲染,另一些螢幕由另一個框架渲染。使用者可以自由地從一個螢幕導航到另一個螢幕,無論使用哪個框架渲染該螢幕。
- 部分螢幕檢視:應用程式中的一個螢幕渲染多個 widget,其中一些 widget 由 Flutter 渲染,另一些 widget 由另一個框架渲染。使用者可以自由地滾動和互動任何 widget,無論使用哪個框架渲染該 widget。
支援的功能
#新增到 Android 應用程式
#
- 透過將 Flutter SDK 鉤子新增到您的 Gradle 指令碼,自動構建和匯入 Flutter 模組。
- 將您的 Flutter 模組構建為通用的 Android 歸檔檔案 (AAR),以便整合到您自己的構建系統中,並與 AndroidX 更好地實現 Jetifier 互操作性。
-
FlutterEngineAPI 用於啟動和持久化您的 Flutter 環境,而無需附加FlutterActivity/FlutterFragment等。 - Android Studio Android/Flutter 聯合編輯和模組建立/匯入嚮導。
- 支援 Java 和 Kotlin 宿主應用程式。
- Flutter 模組可以使用 Flutter 外掛與平臺互動。
- 透過使用 IDE 或命令列中的
flutter attach連線到包含 Flutter 的應用程式,支援 Flutter 除錯和有狀態熱過載。
新增到 iOS 應用程式
#
- 透過將 Flutter SDK 鉤子新增到您的 CocoaPods 和 Xcode 構建階段,自動構建和匯入 Flutter 模組。
- 將您的 Flutter 模組構建為通用的 iOS 框架,以便整合到您自己的構建系統中。
-
FlutterEngineAPI 用於啟動和持久化您的 Flutter 環境,而無需附加FlutterViewController。 - 支援 Objective-C 和 Swift 宿主應用程式。
- Flutter 模組可以使用 Flutter 外掛與平臺互動。
- 透過使用 IDE 或命令列中的
flutter attach連線到包含 Flutter 的應用程式,支援 Flutter 除錯和有狀態熱過載。
請參閱我們的 add-to-app GitHub 示例倉庫,其中包含在 Android 和 iOS 中匯入 Flutter 模組以進行 UI 的示例專案。
新增到 Web 應用程式
#Flutter 可以新增到任何現有的基於 HTML DOM 的 Web 應用程式,該應用程式使用任何客戶端 Dart Web 框架 (jaspr、ngdart、over_react 等)、任何客戶端 JS 框架 (React、Angular、Vue.js 等)、任何伺服器端渲染框架 (Django、Ruby on Rails、Apache Struts 等),甚至沒有框架(親切地稱為 "VanillaJS")。最低要求只是您的現有應用程式及其框架支援匯入 JavaScript 庫,併為 Flutter 建立渲染 HTML 元素。
要將 Flutter 新增到現有應用程式,請正常構建它,然後按照 嵌入說明將 Flutter 檢視放置在頁面上。
開始使用
#要開始使用,請參閱我們針對 Android 和 iOS 的專案整合指南
API 用法
#在 Flutter 整合到您的專案中後,請參閱以下連結的 API 用法指南
侷限性
#移動限制
- 不支援多檢視模式(僅多引擎)。
- 不支援將多個 Flutter 庫打包到應用程式中。
- 如果外掛對 add-to-app 不成立(例如,假設始終存在 Flutter
Activity),則不支援FlutterPlugin的外掛可能會出現意外行為。 - 在 Android 上,Flutter 模組僅支援 AndroidX 應用程式。
Web 限制
- 不支援多引擎模式(僅多檢視)。
- 無法完全“關閉”Flutter 引擎。應用程式可以刪除所有 FlutterView 物件,並使用正常的 Dart 概念確保所有資料都被垃圾回收。但是,即使引擎沒有渲染任何內容,引擎仍然會保持預熱狀態。