將 Flutter 新增到現有應用

如果您正在從頭開始編寫新的應用程式，那麼使用 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。

• 透過將 Flutter SDK 鉤子新增到您的 Gradle 指令碼，自動構建和匯入 Flutter 模組。
• 將您的 Flutter 模組構建為通用的 Android 歸檔檔案 (AAR)，以便整合到您自己的構建系統中，並與 AndroidX 更好地實現 Jetifier 互操作性。
• FlutterEngine API 用於啟動和持久化您的 Flutter 環境，而無需附加 FlutterActivity/FlutterFragment 等。
• Android Studio Android/Flutter 聯合編輯和模組建立/匯入嚮導。
• 支援 Java 和 Kotlin 宿主應用程式。
• Flutter 模組可以使用 Flutter 外掛與平臺互動。
• 透過使用 IDE 或命令列中的 flutter attach 連線到包含 Flutter 的應用程式，支援 Flutter 除錯和有狀態熱過載。

• 透過將 Flutter SDK 鉤子新增到您的 CocoaPods 和 Xcode 構建階段，自動構建和匯入 Flutter 模組。
• 將您的 Flutter 模組構建為通用的 iOS 框架，以便整合到您自己的構建系統中。
• FlutterEngine API 用於啟動和持久化您的 Flutter 環境，而無需附加 FlutterViewController。
• 支援 Objective-C 和 Swift 宿主應用程式。
• Flutter 模組可以使用 Flutter 外掛與平臺互動。
• 透過使用 IDE 或命令列中的 flutter attach 連線到包含 Flutter 的應用程式，支援 Flutter 除錯和有狀態熱過載。

請參閱我們的 add-to-app GitHub 示例倉庫，其中包含在 Android 和 iOS 中匯入 Flutter 模組以進行 UI 的示例專案。

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 的專案整合指南

在 Flutter 整合到您的專案中後，請參閱以下連結的 API 用法指南

移動限制

• 不支援多檢視模式（僅多引擎）。
• 不支援將多個 Flutter 庫打包到應用程式中。
• 如果外掛對 add-to-app 不成立（例如，假設始終存在 Flutter Activity），則不支援 FlutterPlugin 的外掛可能會出現意外行為。
• 在 Android 上，Flutter 模組僅支援 AndroidX 應用程式。

Web 限制

• 不支援多引擎模式（僅多檢視）。
• 無法完全“關閉”Flutter 引擎。應用程式可以刪除所有 FlutterView 物件，並使用正常的 Dart 概念確保所有資料都被垃圾回收。但是，即使引擎沒有渲染任何內容，引擎仍然會保持預熱狀態。