將 Flutter 新增至現有應用程式

如果您要從頭開始撰寫新的應用程式，使用 Flutter 入門非常容易。但是，如果您已經有一個不是用 Flutter 撰寫的應用程式，並且從頭開始不切實際怎麼辦？

對於這些情況，Flutter 可以作為模組逐步整合到您現有的應用程式中。此功能稱為「新增至應用程式」。模組可以匯入到您現有的應用程式中，使用 Flutter 呈現應用程式的一部分，而其餘部分可以使用現有技術呈現。此方法也可以透過利用 Dart 的可移植性以及與其他語言的互通性，來執行共用的非 UI 邏輯。

目前在 Android、iOS 和網頁上支援「新增至應用程式」。

Flutter 支援兩種「新增至應用程式」方式

• 多引擎：在 Android 和 iOS 上支援，允許執行一個或多個 Flutter 實例，每個實例都會在主機應用程式中嵌入的 widget。每個實例都是獨立的 Dart 程式，彼此隔離執行。擁有多個 Flutter 實例可讓每個實例維護獨立的應用程式和 UI 狀態，同時使用最少的記憶體資源。請參閱多個 Flutter頁面以了解更多資訊。
• 多視圖：在網頁上支援，允許建立多個 FlutterView，每個視圖都會在主機應用程式中嵌入的 widget。在此模式中，只有一個 Dart 程式，所有視圖和 widget 都可以共用物件。

「新增至應用程式」支援整合任何大小的多個 Flutter 視圖，以支援各種使用案例。其中兩個最常見的使用案例是

• 混合導覽堆疊：應用程式由多個畫面組成，其中一些由 Flutter 呈現，另一些由另一個框架呈現。使用者可以自由地從一個畫面導覽到另一個畫面，無論使用哪個框架來呈現畫面。
• 部分畫面視圖：應用程式中的畫面會呈現多個 widget，其中一些由 Flutter 呈現，另一些由另一個框架呈現。使用者可以自由地捲動並與任何 widget 互動，無論使用哪個框架來呈現 widget。

• 透過將 Flutter SDK 掛鉤新增至您的 Gradle 腳本，自動建立並匯入 Flutter 模組。
• 將您的 Flutter 模組建置為通用的 Android 封存 (AAR)，以整合到您自己的建置系統中，並獲得更好的 Jetifier 與 AndroidX 的互通性。
• FlutterEngine API 可獨立於附加 FlutterActivity/FlutterFragment 等來啟動並持續您的 Flutter 環境。
• Android Studio Android/Flutter 共同編輯和模組建立/匯入精靈。
• 支援 Java 和 Kotlin 主機應用程式。
• Flutter 模組可以使用 Flutter 外掛程式與平台互動。
• 支援使用 IDE 或命令列的 flutter attach 連線至包含 Flutter 的應用程式，以進行 Flutter 偵錯和具狀態的熱重載。

• 透過將 Flutter SDK 掛鉤新增至您的 CocoaPods 和 Xcode 建置階段，自動建立並匯入 Flutter 模組。
• 將您的 Flutter 模組建置為通用的 iOS 框架，以整合到您自己的建置系統中。
• FlutterEngine API 可獨立於附加 FlutterViewController 來啟動並持續您的 Flutter 環境。
• 支援 Objective-C 和 Swift 主機應用程式。
• Flutter 模組可以使用 Flutter 外掛程式與平台互動。
• 支援使用 IDE 或命令列的 flutter attach 連線至包含 Flutter 的應用程式，以進行 Flutter 偵錯和具狀態的熱重載。

請參閱我們的 新增至應用程式 GitHub 範例儲存庫，其中包含 Android 和 iOS 中匯入 Flutter 模組以進行 UI 的範例專案。

Flutter 可以新增至以任何用戶端 Dart 網頁框架 (jaspr、ngdart、over_react 等)、任何用戶端 JS 框架 (React、Angular、Vue.js 等)、任何伺服器端呈現的框架 (Django、Ruby on Rails、Apache Struts 等)，甚至沒有框架 (俗稱「VanillaJS」) 撰寫的任何現有 HTML DOM 型網頁應用程式。最低要求僅是您現有的應用程式及其框架支援匯入 JavaScript 程式庫，以及建立 HTML 元素以讓 Flutter 呈現。

若要將 Flutter 新增至現有應用程式，請正常建置它，然後依照嵌入指示將 Flutter 視圖放置在頁面上。

若要開始使用，請參閱我們的 Android 和 iOS 專案整合指南

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

行動裝置限制

• 不支援多視圖模式（僅限多引擎）。
• 不支援將多個 Flutter 程式庫封裝到應用程式中。
• 不支援 FlutterPlugin 的外掛程式，如果它們在「新增至應用程式」中做出不合理的假設（例如假設 Flutter Activity 始終存在），可能會出現非預期的行為。
• 在 Android 上，Flutter 模組僅支援 AndroidX 應用程式。

網頁限制

• 不支援多引擎模式（僅限多視圖）。
• 沒有辦法完全「關閉」Flutter 引擎。應用程式可以移除所有 FlutterView 物件，並確保使用一般的 Dart 概念來垃圾收集所有資料。但是，即使它沒有呈現任何內容，引擎也會保持暖機狀態。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新於 2024-08-20。 檢視原始碼 或 回報問題。