目录介绍
- 01.Android承载flutter容器
- 02.过时的NA跳转flutter方案
- 03.升级版本NA跳转Flutter处理
- 04.如何处理NA跳转flutter传参
- 05.思考遇到的几个问题分析
- 06.Flutter页面关闭时Crash
- 07.Android引入flutter本质
- 08.Flutter启动加载流程和优化
00.推荐
- fluter Utils 工具类库：https://github.com/yangchong211/YCFlutterUtils
- flutter 混合项目代码案例：https://github.com/yangchong211/YCHybridFlutter
01.Android承载flutter容器
- Android中如何承载flutter页面呢
- 第一种情况：从Android中弄一个容器，打开一个新的页面，装载一个新的flutter页面。
- 第二种情况：从Android中弄一个容器，在NA的页面中，装载一个flutter页面。【一个页面，有一部分是NA，有一部分是Flutter】
- 如何将Flutter编写的页面嵌入到Activity中
- 官方提供了两种方式：通过FlutterView和FlutterFragment。
02.过时的NA跳转flutter方案
2.1 使用FlutterView
- NA添加FlutterView
- 在NA创建一个Activity，在onCreate中创建FlutterView然后添加到布局中。
- Flutter.createView()方法返回的是一个FlutterView，它继承自View，我们可以把它当做一个普通的View。
- Flutter.createView()方法的第三个参数传入了"yc_route"字符串，表示路由名称，它确定了Flutter中要显示的Widget。private void addFlutterView() {
// 通过FlutterView引入Flutter编写的页面
// Flutter.createView()方法返回的是一个FlutterView，它继承自View，我们可以把它当做一个普通的View
// Flutter.createView()方法的第三个参数传入了"yc_route"字符串，表示路由名称，它确定了Flutter中要显示的Widget
flutterView = Flutter.createView(this, getLifecycle(), INIT_ROUTE);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
//添加到布局中
frameLayout.addView(flutterView, layoutParams);
//addContentView(flutterView, layout);
}
- Flutter添加页面
- 在runApp()方法中通过window.defaultRouteName可以获取到在Flutter.createView()方法中传入的路由名称，即"yc_route"，
- 之后编写了一个_widgetForRoute()方法，根据传入的route字符串显示相应的Widget。import 'dart:ui';
import 'package:flutter/material.dart';
代码语言：txt
复制void main() => runApp(_widgetForRoute(window.defaultRouteName));
代码语言：txt
复制Widget _widgetForRoute(String route) {
代码语言：txt
复制 switch (route) {
代码语言：txt
复制 case 'yc_route':
代码语言：txt
复制 return MyHomePage(title: '匹配到了，这个是flutter页面');
代码语言：txt
复制 }
代码语言：txt
复制}
代码语言：txt
复制```
- 跳转flutter所在activity黑屏
- debug包这种情况比较明显，但是release加载很快，可以在进入Flutter页面的时候提供一个加载loading
2.2 使用FlutterFragment
- NA添加FlutterView
- 在NA创建一个Activity，在onCreate中创建FlutterFragment然后添加到布局中。
- Flutter.createFragment()方法传入的参数同样表示路由名称，用于确定Flutter要显示的Widget，返回一个FlutterFragment，该类继承自Fragment，将该Fragment添加到Activity中就可以了。private void addFlutterFragment(){
// 通过FlutterFragment引入Flutter编写的页面
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
// Flutter.createFragment()方法传入的参数同样表示路由名称，用于确定Flutter要显示的Widget
// 返回一个FlutterFragment，该类继承自Fragment，将该Fragment添加到Activity中就可以了。
FlutterFragment flutterFragment = Flutter.createFragment(INIT_ROUTE);
tx.replace(R.id.rl_flutter, flutterFragment);
tx.commit();
}
- Flutter添加页面，这个同上
2.3 需要注意的问题
- Flutter版本升级兼容问题
- 由于Flutter版本的更新，上面介绍的内容中存在一些API已经被废弃的情况。简单查了一下了解到这个错误是Flutter 1.12版本废弃了io.flutter.facade包导致的，Flutter.createView和Flutter.createFragment这两个api找不到，固现在已经不使用呢……
- NA跳转flutter如何添加参数
- NA，这个传递参数只需要在路由后面拼接参数即可。
- Flutter，这个接收参数只需要解析参数即可。
- 下面升级版本FlutterView的使用案例中会说到，可以接着往下看……
03.升级版本NA跳转Flutter处理
3.1 使用新版本FlutterView
- 新版本简单说明
- 通过FlutterView引入Flutter页面，以前我们是通过io.flutter.facade包中Flutter类的createView()方法创建出一个FlutterView，然后添加到Activity的布局中，但是由于io.flutter.facade包的废弃，该方法已经无法使用。
- 官方的文档有说明目前不提供在View级别引入Flutter的便捷API，因此如果可能的话，我们应该避免使用FlutterView，但是通过FlutterView引入Flutter页面也是可行的。
- 需要注意，这里的FlutterView位于io.flutter.embedding.android包中，和此前我们所创建的FlutterView（位于io.flutter.view包中）是不一样的。
- NA添加FlutterView
- 在NA创建一个Activity，在onCreate中创建FlutterView然后添加到布局中。
- 调用FlutterView的attachToFlutterEngine()方法，这个方法的作用就是将Flutter编写的UI页面显示到FlutterView中，注意到这里传入了一个flutterEngine参数，它又是什么呢？flutterEngine的类型为FlutterEngine，字面意思就是Flutter引擎，它负责在Android端执行Dart代码，将Flutter编写的UI显示到FlutterView的容器中。private void addFlutterView() {
flutterEngine = new FlutterEngine(this);
binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();
flutterEngine.getNavigationChannel().setInitialRoute("yc");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
// 通过FlutterView引入Flutter编写的页面
// 这里的FlutterView位于io.flutter.embedding.android包中
// 和此前我们所创建的FlutterView（位于io.flutter.view包中）是不一样的。
// 通过查看FlutterView的源码可以发现它继承自FrameLayout，因此像一个普通的View那样添加就可以了。
flutterView = new FlutterView(this);
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
rlFlutter.addView(flutterView, lp);
代码语言：txt
复制 //flutterEngine.getNavigationChannel().setInitialRoute("yc");
代码语言：txt
复制 // 关键代码，将Flutter页面显示到FlutterView中
代码语言：txt
复制 // 这个方法的作用就是将Flutter编写的UI页面显示到FlutterView中
代码语言：txt
复制 // flutterEngine的类型为FlutterEngine，字面意思就是Flutter引擎
代码语言：txt
复制 // 它负责在Android端执行Dart代码，将Flutter编写的UI显示到FlutterView/FlutterActivity/FlutterFragment中。
代码语言：txt
复制 flutterView.attachToFlutterEngine(flutterEngine);
代码语言：txt
复制 // FlutterEngine加载的路由名称为"/"，我们可以通过下面的代码指定初始路由名称
代码语言：txt
复制 // 传参的情况没有变化，直接在路由名称后面拼接参数就可以
代码语言：txt
复制 // todo 放在这里不生效，思考为什么
代码语言：txt
复制 // flutterEngine.getNavigationChannel().setInitialRoute("yc");
代码语言：txt
复制}
代码语言：txt
复制```
- Flutter添加页面
- 在runApp()方法中通过window.defaultRouteName可以获取到在Flutter.createView()方法中传入的路由名称，即"yc_route"，
- 之后编写了一个_widgetForRoute()方法，根据传入的route字符串显示相应的Widget。import 'dart:ui';
import 'package:flutter/material.dart';
代码语言：txt
复制void main() => runApp(_widgetForRoute(window.defaultRouteName));
代码语言：txt
复制Widget _widgetForRoute(String route) {
代码语言：txt
复制 switch (route) {
代码语言：txt
复制 case 'yc_route':
代码语言：txt
复制 return MyHomePage(title: '匹配到了，这个是flutter页面');
代码语言：txt
复制 }
代码语言：txt
复制}
代码语言：txt
复制```
3.2 使用新版本FlutterFragment
- NA有几种添加方式
- FlutterFragment.createDefault()
- 通过FlutterFragment.createDefault()创建出FlutterFragment，创建出的Fragment显示的路由名称为"/"，如果我们需要指定其他路由名称就不能使用这个方法了。
- FlutterFragment.withNewEngine()
- 通过FlutterFragment.withNewEngine()获取到NewEngineFragmentBuilder对象，使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。
- 使用的withNewEngine()方法从名称上也能看出每次都是创建一个新的FlutterEngine对象来显示Flutter UI，但是从官方文档中可以了解到每个FlutterEngine对象在显示出Flutter UI之前是需要一个warm-up（简单理解为预热）期的，这会导致屏幕呈现短暂的空白，解决方式就是预先创建并启动FlutterEngine，完成warm-up过程，然后将这个FlutterEngine缓存起来，之后使用这个FlutterEngine来显示出Flutter UI。
- FlutterFragment.withCachedEngine
- 执行的FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine)就是将FlutterEngine缓存起来，这里传入的"my_engine_id"就相当于缓存名称。
- 之后调用FlutterFragment.withCachedEngine("my_engine_id").build();获取缓存的FlutterFragment对象
- NA添加FlutterFragment
- 在NA创建一个Activity，在onCreate中创建FlutterFragment然后添加到布局中。
- Flutter.createFragment()方法传入的参数同样表示路由名称，用于确定Flutter要显示的Widget，返回一个FlutterFragment，该类继承自Fragment，将该Fragment添加到Activity中就可以了。private void addFlutterView() {
// 通过FlutterFragment引入Flutter编写的页面
// 通过FlutterFragment.createDefault()创建出FlutterFragment
// 需要注意这里的FlutterFragment位于io.flutter.embedding.android包中
//FlutterFragment flutterFragment = FlutterFragment.createDefault();
代码语言：txt
复制 // 通过FlutterFragment.withNewEngine()获取到NewEngineFragmentBuilder对象
代码语言：txt
复制 FlutterFragment.NewEngineFragmentBuilder fragmentBuilder = FlutterFragment.withNewEngine();
代码语言：txt
复制 // 使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。
代码语言：txt
复制 // 传递参数只需要在路由名称后面进行拼接。
代码语言：txt
复制 FlutterFragment.NewEngineFragmentBuilder initialRoute = fragmentBuilder.initialRoute("yc");
代码语言：txt
复制 FlutterFragment flutterFragment = initialRoute.build();
代码语言：txt
复制 getSupportFragmentManager()
代码语言：txt
复制 .beginTransaction()
代码语言：txt
复制 .add(R.id.rl_flutter, flutterFragment)
代码语言：txt
复制 .commit();
代码语言：txt
复制 // 存在的问题
代码语言：txt
复制 // 使用的withNewEngine()方法从名称上也能看出每次都是创建一个新的FlutterEngine对象来显示Flutter UI，
代码语言：txt
复制 // 但是从官方文档中我们可以了解到每个FlutterEngine对象在显示出Flutter UI之前
代码语言：txt
复制 // 是需要一个warm-up（不知道能不能翻译为预热）期的，这会导致屏幕呈现短暂的空白，
代码语言：txt
复制 // 解决方式就是预先创建并启动FlutterEngine，完成warm-up过程，然后将这个FlutterEngine缓存起来，
代码语言：txt
复制 // 之后使用这个FlutterEngine来显示出Flutter UI。
代码语言：txt
复制 // 解决方案看：FlutterFragmentCachedActivity
代码语言：txt
复制 // 如何获取到FlutterEngine对象呢？FlutterFragment中定义了一个getFlutterEngine()方法，
代码语言：txt
复制 // 从方法名来看大概就是获取FlutterEngine对象。
代码语言：txt
复制 // 尝试过创建MethodChannel时传入flutterFragment.getFlutterEngine().getDartExecutor()，
代码语言：txt
复制 // 运行后会直接抛出空指针异常，异常产生的位置在FlutterFragment的getFlutterEngine()方法中
代码语言：txt
复制 // 错误原因是这里的delegate为null，全局搜索一下，发现在FlutterFragment的onAttach()方法中会对delegate赋值，也就是说明此时没有执行onAttach()方法。
代码语言：txt
复制 // 猜测这就是由于上面提到过的FlutterEngine的warm-up机制，这是一个耗时过程，
代码语言：txt
复制 // 因此FlutterFragment并不会立刻执行onAttach()方法，导致我们在Activity的onCreate()方法中直接使用FlutterFragment的getFlutterEngine()方法会抛出异常。
代码语言：txt
复制 // todo 调用下面这句话会空指针崩溃
代码语言：txt
复制 // FlutterEngine flutterEngine = flutterFragment.getFlutterEngine();
代码语言：txt
复制}
代码语言：txt
复制```
3.3 使用新版本FlutterActivity
- 原生引入Flutter页面方式
- 使用FlutterActivity，这里的FlutterActivity也是位于io.flutter.embedding.android包下的。
- 首先在清单文件添加代码<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" />
- 直接启动这个Activity，代码如下所示/**
* 和介绍的创建FlutterFragment的三种方式是对应的
*
* FlutterActivity显示的Flutter路由是在创建Intent对象时指定的,
* 优点就是使用起来更简单，缺点就是不够灵活,
* 无法像FlutterView/FlutterFragment那样只是作为原生页面中的一部分展示,
* 因此这种方式更适合整个页面都是由Flutter编写的场景。
*/
private void test(){
// 方式一、FlutterActivity显示的路由名称为"/"，不可设置
/*startActivity(
FlutterActivity.createDefaultIntent(this)
);*/
代码语言：txt
复制 // 方式二、FlutterActivity显示的路由名称可设置，每次都创建一个新的FlutterEngine对象
代码语言：txt
复制 startActivity(
代码语言：txt
复制 FlutterActivity
代码语言：txt
复制 .withNewEngine()
代码语言：txt
复制 .initialRoute("yc")
代码语言：txt
复制 .build(this)
代码语言：txt
复制 );
代码语言：txt
复制 // 方式三、FlutterActivity显示的路由名称可设置，使用缓存好的FlutterEngine对象
代码语言：txt
复制 /*startActivity(
代码语言：txt
复制 FlutterActivity
代码语言：txt
复制 .withCachedEngine("my_engine_id")
代码语言：txt
复制 .build(this)
代码语言：txt
复制 );*/
代码语言：txt
复制}
代码语言：txt
复制```
- 使用这种方式特点
- 这种方式不需要我们自己创建一个Activity，FlutterActivity显示的Flutter路由是在创建Intent对象时指定的，优点就是使用起来更简单，缺点就是不够灵活，无法像FlutterView/FlutterFragment那样只是作为原生页面中的一部分展示，因此这种方式更适合整个页面都是由Flutter编写的场景。
3.4 补充说明问题
- 将Flutter版本更新到了1.17，发现上述代码运行后FlutterView无法显示，这个是为什么呢？
- 和官方提供的示例flutter_view进行了对比，才发现缺少了下面的代码：@Override
protected void onResume() {
super.onResume();
// flutterEngine.getLifecycleChannel()获取到的是一个LifecycleChannel对象，类比于MethodChannel，
// 作用大概就是将Flutter和原生端的生命周期相互联系起来。
flutterEngine.getLifecycleChannel().appIsResumed();
}
代码语言：txt
复制@Override
代码语言：txt
复制protected void onPause() {
代码语言：txt
复制 super.onPause();
代码语言：txt
复制 flutterEngine.getLifecycleChannel().appIsInactive();
代码语言：txt
复制}
代码语言：txt
复制@Override
代码语言：txt
复制protected void onStop() {
代码语言：txt
复制 super.onStop();
代码语言：txt
复制 flutterEngine.getLifecycleChannel().appIsPaused();
代码语言：txt
复制}
代码语言：txt
复制```
- 可能和生命周期有关系
- flutterEngine.getLifecycleChannel()获取到的是一个LifecycleChannel对象，类比于MethodChannel，作用大概就是将Flutter和原生端的生命周期相互联系起来。
- 这里分别在onResume()、onPause()和onStop()方法中调用了LifecycleChannel的appIsResumed()、appIsInactive()和appIsPaused()方法，作用就是同步Flutter端与原生端的生命周期。添加上述代码后，FlutterView就可以正常显示了。
- 为何在之后版本要添加
- 可能是FlutterVIew的渲染机制有了一些变化，在接收到原生端对应生命周期方法中发送的通知才会显示，具体原理还是要对比一下现在和以前的源码。
04.如何处理NA跳转flutter传参
4.1 NA如何传递参数给Flutter？
- 如果需要在页面跳转时传递参数呢，如何在Flutter代码中获取到原生代码中的参数呢？其实很简单，只需要在route后面拼接上参数就可以了。
- 以创建FlutterView的方式为例。NavigationChannel navigationChannel = flutterEngine.getNavigationChannel();
String route = "yc?{"name":"杨充"}";
navigationChannel.setInitialRoute(route);
- 以创建FlutterFragment的方式为例FlutterFragment.NewEngineFragmentBuilder fragmentBuilder = FlutterFragment.withNewEngine();
// 使用建造者模式构造出FlutterFragment对象，可以通过initialRoute()方法指定初始路由名称。
// 传递参数只需要在路由名称后面进行拼接。
String route = "yc?{"author":"杨充"}";
FlutterFragment.NewEngineFragmentBuilder initialRoute = fragmentBuilder.initialRoute(route);
FlutterFragment flutterFragment = initialRoute.build();
4.2 传递参数注意事项
- 将路由名称和参数间用“？”隔开，就像浏览器中的url一样，参数使用了Json格式传递，原因就是方便Flutter端解析，而且对于一些复杂的数据，比如自定义对象，使用Json序列化也很好实现。
4.3 Flutter接收传递参数
- 这时候Flutter端通过window.defaultRouteName获取到的就是路由名称 参数了，我们需要将路由名称和参数分开，这就只是单纯的字符串处理。 Widget _widgetForRoute() {
//var route = window.defaultRouteName;
Map<String, dynamic> router = parseRouter();
var route = router["route"];
switch (route) {
case 'yc':
return AboutMePage(title: '匹配到了，这个是flutter页面',params : router);
}
}
代码语言：txt
复制 Map<String, dynamic> parseRouter(){
代码语言：txt
复制 String url = window.defaultRouteName;
代码语言：txt
复制 // route名称，路由path路径名称
代码语言：txt
复制 String route = url.indexOf('?') == -1 ? url : url.substring(0, url.indexOf('?'));
代码语言：txt
复制 // 参数Json字符串
代码语言：txt
复制 String paramsJson = url.indexOf('?') == -1 ? '{}' : url.substring(url.indexOf('?') 1);
代码语言：txt
复制 // 解析参数
代码语言：txt
复制 Map<String, dynamic> params = json.decode(paramsJson);
代码语言：txt
复制 params["route"] = route;
代码语言：txt
复制 return params;
代码语言：txt
复制 }
代码语言：txt
复制```
- 通过"?"将路由名称和参数分开，将参数对应的Json字符串解析为Map对象，需要导入dart:convert包。
05.思考遇到的几个问题分析
5.1 setInitialRoute生效问题
- flutterEngine.getNavigationChannel().setInitialRoute("yc")生效问题//第一种是生效的
private void addFlutterView() {
flutterEngine = new FlutterEngine(this);
binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();
flutterEngine.getNavigationChannel().setInitialRoute("yc");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
flutterView = new FlutterView(this);
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
rlFlutter.addView(flutterView, lp);
flutterView.attachToFlutterEngine(flutterEngine);
}
代码语言：txt
复制//第二种是不生效的
代码语言：txt
复制private void addFlutterView() {
代码语言：txt
复制 flutterEngine = new FlutterEngine(this);
代码语言：txt
复制 binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();
代码语言：txt
复制 flutterEngine.getDartExecutor().executeDartEntrypoint(
代码语言：txt
复制 DartExecutor.DartEntrypoint.createDefault()
代码语言：txt
复制 );
代码语言：txt
复制 flutterView = new FlutterView(this);
代码语言：txt
复制 FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
代码语言：txt
复制 ViewGroup.LayoutParams.MATCH_PARENT,
代码语言：txt
复制 ViewGroup.LayoutParams.MATCH_PARENT);
代码语言：txt
复制 rlFlutter.addView(flutterView, lp);
代码语言：txt
复制 // todo 放在这里不生效，思考为什么
代码语言：txt
复制 flutterEngine.getNavigationChannel().setInitialRoute("yc");
代码语言：txt
复制 flutterView.attachToFlutterEngine(flutterEngine);
代码语言：txt
复制 // todo 放在这里不生效，思考为什么
代码语言：txt
复制 // flutterEngine.getNavigationChannel().setInitialRoute("yc");
代码语言：txt
复制}
代码语言：txt
复制```
5.2 flutterFragment.getFlutterEngine()空指针
- 使用场景分析private void createChannel() {
// todo 调用下面这句话会空指针崩溃
FlutterEngine flutterEngine = flutterFragment.getFlutterEngine();
BinaryMessenger binaryMessenger = flutterEngine.getDartExecutor().getBinaryMessenger();
nativeChannel = new MethodChannel(binaryMessenger, METHOD_CHANNEL, StandardMethodCodec.INSTANCE);
}
代码语言：txt
复制//源码
代码语言：txt
复制@Nullable
代码语言：txt
复制public FlutterEngine getFlutterEngine() {
代码语言：txt
复制 return delegate.getFlutterEngine();
代码语言：txt
复制}
代码语言：txt
复制```
- 错误原因是这里的delegate为null
- 翻看了一下源码，发现在FlutterFragment的onAttach()方法中会对delegate赋值，也就是说明此时没有执行onAttach()方法。
- 问题分析
- FlutterEngine的warm-up机制，这是一个耗时过程，因此FlutterFragment并不会立刻执行onAttach()方法，导致我们在Activity的onCreate()方法中直接使用FlutterFragment的getFlutterEngine()方法会抛出异常。
- 如何解决问题
- 想要解决问题，那就要等到FlutterFragment执行完onAttach()方法在调用getFlutterEngine。那么怎么去监听这个方法执行完呢？
06.Flutter页面关闭时Crash
- 报错日志如下所示 Caused by: java.lang.RuntimeException: Cannot execute operation because FlutterJNI is not attached to native.
at io.flutter.embedding.engine.FlutterJNI.ensureAttachedToNative(FlutterJNI.java:259)
at io.flutter.embedding.engine.FlutterJNI.onSurfaceDestroyed(FlutterJNI.java:369)
at io.flutter.embedding.engine.renderer.FlutterRenderer.stopRenderingToSurface(FlutterRenderer.java:219)
at io.flutter.embedding.android.FlutterTextureView.disconnectSurfaceFromRenderer(FlutterTextureView.java:223)
at io.flutter.embedding.android.FlutterTextureView.access$400(FlutterTextureView.java:33)
at io.flutter.embedding.android.FlutterTextureView$1.onSurfaceTextureDestroyed(FlutterTextureView.java:84)
at android.view.TextureView.releaseSurfaceTexture(TextureView.java:261)
at android.view.TextureView.onDetachedFromWindowInternal(TextureView.java:232)
at android.view.View.dispatchDetachedFromWindow(View.java:22072)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:4747)
at android.view.ViewGroup.removeAllViewsInLayout(ViewGroup.java:6606)
at android.view.ViewGroup.removeAllViews(ViewGroup.java:6552)
at com.yc.fluttercontainer.FlutterEngineActivity.onDestroy(FlutterEngineActivity.java:292)
- 报错的代码如下所示@Override
protected void onDestroy() {
super.onDestroy();
if (flutterEngine != null) {
flutterEngine.destroy();
}
mFlutterContainer.removeAllViews();
mFlutterView.removeAllViews();
if (mRenderSurface != null) {
// 打断内存泄漏
((FixFlutterTextureView) mRenderSurface).setSurfaceTextureListener(null);
}
}
- https://blog.csdn.net/cxz200367/article/details/105998930
07.Android引入flutter本质
- 如何理解Android引入flutter页面
- Android项目引入Flutter本质上是将Flutter编写的Widget嵌入到Activity中，类似于WebView，容器Activity相当于WebView，route相当于url，有两种方式FlutterView和FlutterFragment。页面间的跳转和传参可以借助MethodChannel来实现。
08.Flutter启动加载优化
8.1 分析flutter的启动页面流程
- 通过flutter引擎，整个flutter引擎的相关初始化工作在onCreate方法里开始的protected void onCreate(@Nullable Bundle savedInstanceState) {
this.switchLaunchThemeForNormalTheme();
super.onCreate(savedInstanceState);
this.lifecycle.handleLifecycleEvent(Event.ON_CREATE);
this.delegate = new FlutterActivityAndFragmentDelegate(this);
//创建绑定引擎等
delegate.onAttach(this);
//用于插件、框架恢复状态
delegate.onActivityCreated(savedInstanceState);
//设置窗口背景透明，隐藏 status bar
configureWindowForTransparency();
//从这里分析，这里是咱们的入口
setContentView(createFlutterView());
this.configureStatusBarForFullscreenFlutterExperience();
}
- 然后接着往下看，会调用到FlutterActivityAndFragmentDelegate类的onCreateView方法
- FlutterActivityAndFragmentDelegate类，flutter的初始化、启动等操作都是委托给它的。
- 大致了解到，创建了一个FlutterSurfaceView 它继承自surfaceView(我们的flutter页面也是渲染在这个surface上的)。之后我们用它初始化一个FlutterView，@NonNull
View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
Log.v("FlutterActivityAndFragmentDelegate", "Creating FlutterView.");
this.ensureAlive();
if (this.host.getRenderMode() == RenderMode.surface) {
//flutter 应用在surface上显示，所以会进入到这里
FlutterSurfaceView flutterSurfaceView = new FlutterSurfaceView(this.host.getActivity(), this.host.getTransparencyMode() == TransparencyMode.transparent);
this.host.onFlutterSurfaceViewCreated(flutterSurfaceView);
//用flutterSurfaceView 初始化了一个 FlutterView
this.flutterView = new FlutterView(this.host.getActivity(), flutterSurfaceView);
} else {
//否则，应用在TextureView上显示
FlutterTextureView flutterTextureView = new FlutterTextureView(this.host.getActivity());
this.host.onFlutterTextureViewCreated(flutterTextureView);
//用flutterTextureView 初始化了一个 FlutterView
this.flutterView = new FlutterView(this.host.getActivity(), flutterTextureView);
}
代码语言：txt
复制 this.flutterView.addOnFirstFrameRenderedListener(this.flutterUiDisplayListener);
代码语言：txt
复制 //创建一个闪屏view - FlutterSplashView
代码语言：txt
复制 this.flutterSplashView = new FlutterSplashView(this.host.getContext());
代码语言：txt
复制 if (VERSION.SDK_INT >= 17) {
代码语言：txt
复制 this.flutterSplashView.setId(View.generateViewId());
代码语言：txt
复制 } else {
代码语言：txt
复制 this.flutterSplashView.setId(486947586);
代码语言：txt
复制 }
代码语言：txt
复制 //显示闪屏页
代码语言：txt
复制 this.flutterSplashView.displayFlutterViewWithSplash(this.flutterView, this.host.provideSplashScreen());
代码语言：txt
复制 Log.v("FlutterActivityAndFragmentDelegate", "Attaching FlutterEngine to FlutterView.");
代码语言：txt
复制 //所创建surface 绑定到engine上
代码语言：txt
复制 this.flutterView.attachToFlutterEngine(this.flutterEngine);
代码语言：txt
复制 return this.flutterSplashView;
代码语言：txt
复制}
代码语言：txt
复制```
- 随后我们再创建一个FlutterSplashView （继承FrameLayout）。重要看调用displayFlutterViewWithSplash（）方法。
- 看到这里可知，通过splashScreen(是个接口)，具体看接口实现类，然后创建一个splashScreenView，最后添加到flutter的布局中public void displayFlutterViewWithSplash(@NonNull FlutterView flutterView, @Nullable SplashScreen splashScreen) {
if (this.splashScreenView != null) {
this.removeView(this.splashScreenView);
}
//省略大量代码
this.flutterView = flutterView;
this.addView(flutterView);
this.splashScreen = splashScreen;
if (splashScreen != null) {
if (this.isSplashScreenNeededNow()) {
Log.v(TAG, "Showing splash screen UI.");
this.splashScreenView = splashScreen.createSplashView(this.getContext(), this.splashScreenState);
//添加 splashScreenView
this.addView(this.splashScreenView);
flutterView.addOnFirstFrameRenderedListener(this.flutterUiDisplayListener);
}
}
}
- 那么什么时候移除这个启动Splash布局呢？在创建FlutterSplashView时，添加了一个完成事件的监听，当flutter加载成功后才将它移除。public FlutterSplashView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.onTransitionComplete = new Runnable() {
public void run() {
FlutterSplashView.this.removeView(FlutterSplashView.this.splashScreenView);
FlutterSplashView.this.previousCompletedSplashIsolate = FlutterSplashView.this.transitioningIsolateId;
}
};
this.setSaveEnabled(true);
}
- 得出结论
- 可以发现在闪屏页的显示到引擎的启动及flutter 页面的显示会有一个很长的过程，而直到flutter 页面的显示，这个闪屏页才会被移除掉。
8.2 如何优化flutter启动屏
- 第一种方案
- Flutter由于引擎的创建和初始化需要一定时间，所以也提供了一个过渡方案（默认是白屏）。如下所示，你可以设置一下背景AndroidManifest.xml下的
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"/>
- 第二种方案@Nullable
@Override
public SplashScreen provideSplashScreen() {
//创建自定义flutter启动屏view
return new FlutterSplashView();
}
代码语言：txt
复制public class FlutterSplashView implements SplashScreen {
代码语言：txt
复制 @Nullable
代码语言：txt
复制 @Override
代码语言：txt
复制 public View createSplashView(@NonNull Context context, @Nullable Bundle savedInstanceState) {
代码语言：txt
复制 View v = new View(context);
代码语言：txt
复制 v.setBackgroundColor(Color.WHITE);
代码语言：txt
复制 return v;
代码语言：txt
复制 }
代码语言：txt
复制 @Override
代码语言：txt
复制 public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
代码语言：txt
复制 onTransitionComplete.run();
代码语言：txt
复制 }
代码语言：txt
复制}
代码语言：txt
复制```
fluter Utils 工具类库：https://github.com/yangchong211/YCFlutterUtils
flutter 混合项目代码案例：https://github.com/yangchong211/YCHybridFlutter
