推薦閱讀
目錄
前言
本文先介紹原生Android項目中嵌套flutter頁面，需先到項目工程中集成flutter module。然後，通過Activity跳轉或addView()方式打開flutter頁面。
一、創建module
菜單選項 → File -> New -> New Flutter Project -> Flutter Module；
二、Android Project 中添加依賴
如果第1步比較順利，默認工程會自動配置依賴。如果沒有默認配置，那需要手動配置一下，參考如下。
（1）在 setting.gradle 中加入 Flutter 的引入；
include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir,
'flutter_view/.android/include_flutter.groovy'
))
include ':flutter_view'
（2）在app/build.project 中添加 Flutter 依賴；
dependencies{
implementation project(path: ':flutter')
}
（3）在app/build.project 中指定JDK1.8，且最低版本在 16 以上；
android {
defaultConfig {//版本號...minSdkVersion >= 16}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
三、原生Activity頁面內嵌Flutter
Android原生Activity頁面內添加Flutter頁面，有兩種方案：FlutterView和FlutterFragment。我們來分別看一下現在應該如何實現。
1、通過FlutterView
public class MyActivity extends AppCompatActivity {
FlutterEngine flutterEngine;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mylayout);
createEngine();
openFlutterView();
// openFlutterFragment();
}
private void createEngine(){
flutterEngine = new FlutterEngine(this);
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
flutterEngine.getNavigationChannel().setInitialRoute("route1");//指定路由
}
private void openFlutterView(){
FlutterView flutterView = new FlutterView(this);
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
FrameLayout flContainer = findViewById(R.id.flutter_view);
flContainer.addView(flutterView, lp);
flutterView.attachToFlutterEngine(flutterEngine);
}
@Override
protected void onResume() {
super.onResume();
flutterEngine.getLifecycleChannel().appIsResumed();
}
@Override
protected void onPause() {
super.onPause();
flutterEngine.getLifecycleChannel().appIsInactive();
}
@Override
protected void onStop() {
super.onStop();
flutterEngine.getLifecycleChannel().appIsPaused();
}
FlutterEngine引擎 ：它負責在Android端執行Dart代碼，將Flutter編寫的UI顯示到FlutterView或FlutterActivity或FlutterFragment中。創建好了一個FlutterEngine對象，默認情況下FlutterEngine加載的路由名稱爲"/"，我們可以通過代碼指定初始路由名稱。另外，每個FlutterEngine對象在顯示出Flutter UI之前是需要一個warm-up準備期的，導致屏幕呈現短暫的空白。解決方式就是預先創建並啓動FlutterEngine，完成warm-up過程，然後將這個FlutterEngine緩存起來，之後使用這個FlutterEngine來顯示出Flutter UI。
2、通過FlutterFragment
官方提供了三種創建FlutterFragment的方式，我們來分別看一下。
（1）通過FlutterFragment.createDefault()，默認路由名稱爲"/"，如果需要指定路由就不能用了。
//import io.flutter.embedding.android.FlutterFragment;
private void openFlutterFragment() {
FlutterFragment flutterFragment = FlutterFragment.createDefault();
getSupportFragmentManager()
.beginTransaction()
.add(R.id.fl_container, flutterFragment)
.commit();
}
（2）通過FlutterFragment.withNewEngine()創建一個新的NewEngineFragmentBuilder對象。使用建造者模式構造出FlutterFragment對象，可以通過initialRoute()方法指定初始路由名稱。
private void openFlutterFragment() {
FragmentTransaction tx = getSupportFragmentManager()
.beginTransaction();
FlutterFragment fragment = FlutterFragment.withNewEngine().initialRoute("route1").build();
tx.replace(R.id.flutter_view, fragment);
tx.commit();
}
（3）通過FlutterEngineCache.getInstance().put()提前將FlutterEngine對象緩存。然後通過FlutterFragment.withCachedEngine()方法創建FlutterFragment對象。
// 創建可緩存的FlutterEngine對象
FlutterEngine flutterEngine = new FlutterEngine(this);
flutterEngine.getNavigationChannel().setInitialRoute("route1");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine);
// 通過FlutterFragment引入Flutter編寫的頁面
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
.build();
四、原生Activity跳轉Flutter界面
在原生Activity頁面調用啓動Activity的方法——startActivity()就可以打開Flutter界面。
這種方式不需要再創建一個FlutterActivity。優點就是使用起來更簡單。
缺點就是不夠靈活，無法像FlutterView/FlutterFragment那樣只是作爲原生頁面中的一部分展示，因此這種方式更適合整個頁面都是由Flutter編寫的場景。
在調試階段，跳轉FlutterActivity之後也會黑屏幾秒，同樣地，打了release包後就沒有問題了。
首先，需要在原生Android項目工程下的AndroidManifest.xml文件中註冊FlutterActivity，代碼如下。
<activity
android:name="io.flutter.embedding.android.FlutterActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:theme="@style/AppTheme"
android:windowSoftInputMode="adjustResize" />
三種啓動方式：
1 、FutterActivity默認路由名稱爲"/"，默認打開main.dart的main方法。
startActivity(
FlutterActivity.createDefaultIntent(this)
);
2、FutterActivity路由名稱爲“route1”，創建一個新的FlutterEngine對象
startActivity(
FlutterActivity
.withNewEngine()
.initialRoute("route1")
.build(this)
);
3、FutterActivity 使用緩存的引擎對象
startActivity(
FlutterActivity
.withCachedEngine("engine_id")
.build(this)
);
小結
至此，原生Android項目中集成Flutter的混編算是邁出了最重要的一步。此時，我們可以輕鬆從原生Activity跳轉到一個全新Flutter頁面，或者在一個Activity中內嵌Flutter的界面。然後呢，我們就需要學習如何從Flutter界面跳轉到其他原生Activity頁面，或者傳值到原生Activity頁面。
等下，彆着急走，點個關注，方便下次複習。下篇見！😁