NA嵌入Flutter页面

目录介绍

• 01.Android承载flutter容器
• 02.过时的NA跳转flutter方案
• 03.升级版本NA跳转Flutter处理
• 04.如何处理NA跳转flutter传参
• 05.思考遇到的几个问题分析
• 06.Flutter页面关闭时Crash
• 07.Android引入flutter本质
• 08.Flutter启动加载流程和优化

00.推荐

• fluter Utils 工具类库：github.com/yangchong21…
• flutter 混合项目代码案例：github.com/yangchong21…

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';
  
  void main() => runApp(_widgetForRoute(window.defaultRouteName));
  
  Widget _widgetForRoute(String route) {
    switch (route) {
      case 'yc_route':
        return  MyHomePage(title: '匹配到了，这个是flutter页面');
    }
  }

• 跳转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