新增Flutter到現有應用

喜羊羊_發表於2020-01-04
Flutter

原文連結：flutter.dev/docs/develo…

概述

使用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執行時異常。相關配置示例如下：

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必須在清單檔案中進行註冊，示例如下：

<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了，示例如下：

myButton.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity.createDefaultIntent(currentActivity)
    );
  }
});
複製程式碼

上面的示例假設了Dart程式碼的入口點在main()方法，Flutter路由路徑是/。Dart程式碼的入口點並不能通過Intent來更改，但是初始化路由是可以通過Intent來更改的，下面的示例演示瞭如何更改初始化路由：

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程式碼中進行預載入：

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。

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中需要使用特殊的屬性來渲染透明背景，如下：

<style name="MyTheme" parent="@style/MyParentTheme">
  <item name="android:windowIsTranslucent">true</item>
</style>
複製程式碼
<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，示例如下：

// 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

新增一個閃屏

未完待續

相關文章