原文鏈接：[https://flutter.dev/docs/development/add-to-app](https://flutter.dev/docs/development/add-to-app) # 概述 使用Flutter對我們現有的應用進行重構并不是一件容易的事，針對這種情況，Flutter可以分次以庫或模塊的形式集成到現有應用，在應用中可以對部分UI使用Flutter進行渲染。僅僅通過簡單的幾部，就可以在我們現有應用中引入Flutter強大的功能。 在FlutterV1.12版本中，支持將全屏Flutter實例添加到現有應用中，目前有以下限制： * 運行多個Flutter實例或局部Flutter UI可能會有不穩定的表現 * 在后臺模式下使用Flutter依舊不成熟 * 暫不支持打包Flutter庫到另一個庫，以及集成多個Flutter庫到一個應用中 ## 已支持的功能 ### 添加Flutter到Android應用中 * 在gradle腳本文件中添加相關配置即可自動引入和構建Flutter模塊 * ### 添加Flutter到iOS應用中 略 # 添加Flutter到現有應用 ## 基礎配置 Flutter可以借助gradle腳本以源碼形式集成到現有應用中，也可以使用aar形式集成到現有應用。可以使用Android Studio提供的插件來集成，也可以用命令行來手動集成。 > 注意：現有應用可能會支持mips和x86/x86_64架構，但Flutter目前使用AOT模式編譯庫僅支持armeabi-v7a和arm64-v8a架構，因此建議在gradle文件中使用abiFilters來限制支持的架構平臺，來避免出現丟失libflutter.so運行時異常。相關配置示例如下： ```gradle android { //... defaultConfig { ndk { // Filter for architectures supported by Flutter. abiFilters 'armeabi-v7a', 'arm64-v8a' } } } ``` Flutter引擎有x86和x86_64版本，所以在使用模擬器調試時，Flutter會以JIT模式進行編譯運行。 ### 使用Android Studio集成Flutter 使用Android Studio可以很方便的集成Flutter，借助Android Studio，可以將Android代碼和Flutter代碼放到一個文件目錄下，可以繼續正常使用IntelliJ的系列插件如Dart代碼補全、熱重載、Widget分析器等等。‘ 使用Android Studio集成Flutter需要Android Studio版本在3.6以上，Flutter IntelliJ插件版本在42以上。目前僅支持使用gradle腳本和源碼的方式集成，暫不支持使用aar的形式。 打開現有應用項目，在Android Studio的菜單`File > New > New Module...`中，可以選擇創建一個新的Flutter Module或選擇已存在的Flutter Module。 如果選擇創建新的Flutter Module，可以在向導中配置該Module的名字、路徑等信息。 Android Studio插件會自動配置現有應用項目來依賴Flutter Module，現在項目已經可以進行構建了。 tip：在項目Project視圖下可以看到Flutter文件目錄，如果看不到可能是以Android視圖查看的，調整視圖即可。 ### 使用命令行手動集成Flutter ## 添加一個簡單Flutter Screen 下面介紹如何添加一個Flutter Screen到現有應用中，Flutter Screen可以有普通的、不透明的、可透視的以及透明的幾種形式。 ### 添加一個普通的Screen #### 1、添加FlutterActivity到清單文件中 在Android應用中，Flutter提供FlutterActivity來顯示相關UI，和其他普通Activity一樣，FlutterActivity必須在清單文件中進行注冊，示例如下： ```xml <activity android:name="io.flutter.embedding.android.FlutterActivity" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize" /> ``` 其中theme屬性的`@style/LaunchTheme`可以替換成其他任何普通的theme，theme的設定和Android系統的Chrome有關？如導航欄。 #### 2、導航到FlutterActivity 在添加完清單文件后，可以在任何時候導航到FlutterActivity了，示例如下： ```java myButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { startActivity( FlutterActivity.createDefaultIntent(currentActivity) ); } }); ``` 上面的示例假設了Dart代碼的入口點在main()方法，Flutter路由路徑是`/`。Dart代碼的入口點并不能通過Intent來更改，但是初始化路由是可以通過Intent來更改的，下面的示例演示了如何更改初始化路由： ```java myButton.addOnClickListener(new OnClickListener() { @Override public void onClick(View v) { startActivity( FlutterActivity .withNewEngine() .initialRoute("/my_route") .build(currentActivity) ); } }); ``` 可以通過替換`/my_route`來更改期望的初始化路由。 使用withNewEngine() 方法，創建了擁有自己的FlutterEngine實例的FlutterActivity對象，這帶來一個FlutterEngine初始化耗時問題，優化的方法是預加載并緩存FlutterEngine，創建FlutterActivity對象時就無需再初始化FlutterEngine，來最小化FlutterActivity的耗時問題，關于此問題下文將會詳述。 #### 3、（可選）緩存FlutterEngine 默認情況下，每一個FlutterActivity都會創建自己的FlutterEngine對象，每一個FlutterEngine都需要加載耗時，也就是說打開每一個標準的FlutterActivity時都會有一個延遲。為了減少這個延遲，可以在打開FlutterActivity前預加載FlutterEngine，需要使用的時候直接使用預加載好的FlutterEngine。 需要找一個合適的地方來預加載FlutterEngine，下面的示例在Application代碼中進行預加載： ```java public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); // Instantiate a FlutterEngine. flutterEngine = new FlutterEngine(this); // Start executing Dart code to pre-warm the FlutterEngine. flutterEngine.getDartExecutor().executeDartEntrypoint( DartEntrypoint.createDefault() ); // Cache the FlutterEngine to be used by FlutterActivity. FlutterEngineCache .getInstance() .put("my_engine_id", flutterEngine); } } ``` 傳遞給FlutterEngineCache的id可以是任意值，只要確保和在FlutterActivity和FlutterFragment中取出FlutterEngine時使用的一致即可。下面來看看如何使用緩存的FlutterEngine。 ```java myButton.addOnClickListener(new OnClickListener() { @Override public void onClick(View v) { startActivity( FlutterActivity .withCachedEngine("my_engine_id") .build(currentActivity) ); } }); ``` 當使用withCachedEngine方法時，注意id要和預加載FlutterEngine時保持一致。現在再打開FlutterActivity時，延遲問題就好很多了。 ### 添加一個透明的Flutter Screen 大部分的Flutter UI是不透明的，但是有時候需要顯示成部分UI，比如Dialog、底部sheet等，Flutter支持透明的FlutterActivity。接下來看看如何實現透明的FlutterActivity。 #### 1、使用透明主題 Android中需要使用特殊的屬性來渲染透明背景，如下： ```xml <style name="MyTheme" parent="@style/MyParentTheme"> <item name="android:windowIsTranslucent">true</item> </style> ``` ```xml <activity android:name="io.flutter.embedding.android.FlutterActivity" android:theme="@style/MyTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize" /> ``` 現在FlutterActivity支持了透明顯示了，接下來在打開時需要明確設置透明模式。 #### 2、打開透明的FlutterActivity 打開透明背景的FlutterActivity，需要傳遞適當的BackgroundMode值給IntentBuilder，示例如下： ```java // Using a new FlutterEngine. startActivity( FlutterActivity .withNewEngine() .backgroundMode(FlutterActivity.BackgroundMode.transparent) .build(context) ); // Using a cached FlutterEngine. startActivity( FlutterActivity .withCachedEngine("my_engine_id") .backgroundMode(FlutterActivity.BackgroundMode.transparent) .build(context) ); ``` 現在就擁有了一個背景透明的FlutterActivity了。 ## 添加一個Flutter Fragment ## 添加一個閃屏