AndroidStudio项目中集成Flutter
需先到项目工程中集成flutter module。然后,通过原生Android的Activity跳转或addView()方式打开flutter页面。
AS创建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
}
}
Flutter两种方式打开
一种是在原生里页面内添加View页面(FlutterView和FlutterFragment),另外一种是在原生页面跳转打开FlutterActivity。
FlutterEngine引擎 :它负责执行Dart代码,将Flutter编写的UI显示到FlutterView或FlutterActivity或FlutterFragment中。创建好了一个FlutterEngine对象,我们可以通过代码指定初始路由名称。另外,每个FlutterEngine对象在显示出Flutter UI之前是需要一个warm-up准备期的,导致屏幕呈现短暂的空白。解决方式就是预先创建并启动FlutterEngine,完成warm-up过程,然后将这个FlutterEngine缓存起来,之后使用这个FlutterEngine来显示出Flutter UI。
FlutterView
public class MyActivity extends AppCompatActivity {
FlutterEngine flutterEngine;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mylayout);
createEngine();
openFlutterView();
}
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();
}
FlutterFragment
官方提供了三种创建FlutterFragment的方式:
private void openFlutterFragment() {
FlutterFragment flutterFragment = FlutterFragment.createDefault();
getSupportFragmentManager()
.beginTransaction()
.add(R.id.fl_container, flutterFragment)
.commit();
//或者
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
FlutterFragment fragment = FlutterFragment.withNewEngine().initialRoute("route1").build();
tx.replace(R.id.flutter_view, fragment);
tx.commit();
}
// 创建可缓存的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界面
首先,需要在工程下的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(
// 创建可缓存的FlutterEngine对象
FlutterEngine flutterEngine = new FlutterEngine(this);
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
flutterEngine.getNavigationChannel().setInitialRoute("route1");
FlutterEngineCache.getInstance().put("engine_id", flutterEngine);
FlutterActivity
.withCachedEngine("engine_id")
.build(this)
);
跳转Flutter带参数
通常情况下,我们需要在页面跳转时传递参数完成一些业务功能。那么,如何在Flutter代码中获取到原生代码中的参数呢?
只需要在route地址后缀拼接参数就可以了。代码示例如下:
private void createEngine(){
flutterEngine = new FlutterEngine(this);
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
flutterEngine.getNavigationChannel().
setInitialRoute("route1?{\"id\":123456}");//指定路由
}
在flutter页面代码:
String url = window.defaultRouteName;
// route名称
String route =
url.indexOf('?') == -1 ? url : url.substring(0, url.indexOf('?'));
// 参数Json字符串
String paramsJson =
url.indexOf('?') == -1 ? '{}' : url.substring(url.indexOf('?') + 1);
// 解析参数
Map<String, dynamic> params = json.decode(paramsJson);
*参数就在Map对象中了,需要导入dart:convert
包。
至此,原生Android项目中集成Flutter的混编算是迈出了最重要的一步。
下一篇,学习从Flutter界面跳转到其他原生Activity页面通讯。