將 Flutter 新增到現有應用

如果你是從零開始編寫一個新應用，使用 Flutter 入門非常簡單。但如果你已經有一個並非用 Flutter 編寫的應用，且從頭重寫不切實際，該怎麼辦呢？

在這種情況下，可以將 Flutter 以模組的形式逐步整合到現有的應用中。這一功能被稱為“Add-to-app”。該模組可以匯入到現有應用中，用 Flutter 渲染應用的一部分，而其餘部分則使用現有技術渲染。這種方法還可以利用 Dart 的可移植性和與其他語言的互操作性，來執行共享的非 UI 邏輯。

Add-to-app 目前支援 Android、iOS 和 Web 平臺。

Flutter 支援兩種 Add-to-app 模式

• 多引擎模式 (Multi-engine)：在 Android 和 iOS 上支援，允許執行一個或多個 Flutter 例項，每個例項渲染一個嵌入到宿主應用中的元件。每個例項都是一個獨立的 Dart 程式，與其他程式隔離執行。擁有多個 Flutter 例項允許每個例項在佔用極少記憶體資源的同時，保持獨立的應用程式和 UI 狀態。詳見 multiple Flutters 頁面。
• 多檢視模式 (Multi-view)：在 Web 上支援，允許建立多個 FlutterView，每個檢視渲染一個嵌入到宿主應用中的元件。在此模式下，只有一個 Dart 程式，所有檢視和元件都可以共享物件。

Add-to-app 支援整合任意大小的多個 Flutter 檢視，以滿足各種使用場景。其中最常見的兩個使用場景是：

• 混合導航棧 (Hybrid navigation stacks)：應用由多個頁面組成，其中一些由 Flutter 渲染，另一些由其他框架渲染。使用者可以自由地在頁面間導航，而無需考慮渲染該頁面所使用的框架。
• 頁面區域性檢視 (Partial-screen views)：應用中的一個頁面包含多個元件，其中一些由 Flutter 渲染，另一些由其他框架渲染。使用者可以自由地滾動和互動任何元件，而無需考慮渲染該元件所使用的框架。

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

• 透過將 Flutter SDK 鉤子新增到 CocoaPods 和 Xcode 構建階段，自動構建並匯入 Flutter 模組。
• 將 Flutter 模組構建為通用的 iOS Framework，以便整合到你自己的構建系統中。
• FlutterEngine API，用於獨立於 FlutterViewController 啟動並持久化你的 Flutter 環境。
• 支援 Objective-C 和 Swift 宿主應用。
• Flutter 模組可以使用 Flutter 外掛與平臺進行互動。
• 支援透過 IDE 或命令列使用 flutter attach 連線到包含 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 新增到現有 Web 應用，請按常規方式構建它，然後按照 嵌入說明 (embedding instructions) 將 Flutter 檢視放置到頁面上。

入門指南，請參閱我們的 Android 和 iOS 專案整合指南：

在 Flutter 整合到你的專案後，請透過以下連結檢視我們的 API 使用指南：

移動端限制

• 不支援多檢視模式 (僅支援多引擎模式)。
• 不支援將多個 Flutter 庫打包到一個應用中。
• 不支援 FlutterPlugin 的外掛，如果在 Add-to-app 環境中做出不合理的假設（例如假設 Flutter 的 Activity 一直存在），可能會導致意外行為。
• 在 Android 上，Flutter 模組僅支援 AndroidX 應用。

Web 端限制

• 不支援多引擎模式 (僅支援多檢視模式)。
• 目前無法徹底“關閉” Flutter 引擎。應用可以移除所有 FlutterView 物件，並確保使用標準的 Dart 概念對所有資料進行垃圾回收。然而，即使引擎沒有渲染任何內容，它仍將保持啟動（ warmed up）狀態。