Flutter Boost 混合开发框架初探

1、Flutter Boost简介

众所周知，Flutter是一个由C++实现的Flutter Engine和由Dart实现的Framework组成的跨平台技术框架。其中，Flutter Engine负责线程管理、Dart VM状态管理以及Dart代码加载等工做，而Dart代码所实现的Framework则负责上层业务开发，如Flutter提供的组件等概念就是Framework的范畴。

随着Flutter的发展，国内愈来愈多的App开始接入Flutter。为了下降风险，大部分App采用渐进式方式引入Flutter，在App里选几个页面用Flutter来编写，但都碰到了相同的问题，在原生页面和Flutter页面共存的状况下，如何管理路由，以及原生页面与Flutter页面之间的切换和通讯都是混合开发中须要解决的问题。然而，官方没有提供明确的解决方案，只是在混合开发时，官方建议开发者，应该使用同一个引擎支持多窗口绘制的能力，至少在逻辑上作到FlutterViewController是共享同一个引擎里面的资源。换句话说，官方但愿全部的绘制窗口共享同一个主Isolate，而不是出现多个主Isolate的状况。不过，对于如今已经出现的多引擎模式问题，Flutter官方也没有提供好的解决方案。除了内存消耗严重外，多引擎模式还会带来以下一些问题。

• 冗余资源问题。多引擎模式下每一个引擎的Isolate是相互独立的，虽然在逻辑上这并无什么坏处，可是每一个引擎底层都维护了一套图片缓存等比较消耗内存的对象，所以设备的内存消耗是很是严重的。
• 插件注册问题。在Flutter插件中，消息传递须要依赖Messenger，而Messenger是由FlutterViewController去实现的。若是一个应用中同时存在多个FlutterViewController，那么插件的注册和通讯将会变得混乱且难以维护。
• Flutter组件和原生页面的差别化问题。一般，Flutter页面是由组件构成的，原生页面则是由ViewController或者Activity构成的。逻辑上来讲，咱们但愿消除Flutter页面与原生页面的差别，不然在进行页面埋点和其它一些操做时增长一些额外的工做量。
• 增长页面通讯的复杂度。若是全部的Dart代码都运行在同一个引擎实例中，那么它们会共享同一个Isolate，能够用统一的框架完成组件之间的通讯，可是若是存在多个引擎实例会让Isolate的管理变得更加复杂。

若是不解决多引擎问题，那么混合项目的导航栈以下图所示。

目前，对于原生工程混编Flutter工程出现的多引擎模式问题，国内主要有两种解决方案，一种是字节跳动的修改Flutter Engine源码方案，另外一种是闲鱼开源的FlutterBoost。因为字节跳动的混合开发的方案没有开源，因此如今能使用的就剩下FlutterBoost方案。

FlutterBoost是闲鱼技术团队开发的一个可复用页面的插件，旨在把Flutter容器作成相似于浏览器的加载方案。为此，闲鱼技术团队为但愿FlutterBoost能完成以下的基本功能：

• 可复用的通用型混合开发方案。
• 支持更加复杂的混合模式，好比支持Tab切换的场景。
• 无侵入性方案，使用时再也不依赖修改Flutter的方案。
• 支持对页面生命周期进行统一的管理。
• 具备统一明确的设计概念。

而且，最近Flutter Boost升级了3.0版本，并带来了以下的一些更新：

• 不侵入引擎，兼容Flutter的各类版本，Flutter sdk的升级不须要再升级FlutterBoost，极大下降升级成本。
• 不区分Androidx和Support分支。
• 简化架构和接口，和FlutterBoost2.0比，代码减小了一半。
• 双端统一，包括接口和设计上的统一。
• 支持打开Flutter页面，再也不打开容器场景。
• 页面生命周期变化通知更方便业务使用。
• 解决了2.0中的遗留问题，例如，Fragment接入困难、页面关闭后不能传递数据、dispose不执行，内存占用太高等。

2、Flutter Boost集成

在原生项目中集成Flutter Boost只须要将Flutter Boost当作是一个插件工程便可。和其余Flutter插件的集成方式同样，使用FlutterBoost以前须要先添加依赖。使用Android Studio打开混合工程的Flutter工程，在pubspec.yaml中添加FlutterBoost依赖插件，以下所示。

flutter_boost:
    git:
        url: 'https://github.com/alibaba/flutter_boost.git'
        ref: 'v3.0-hotfixes'

须要说明的是，此处的所依赖的FlutterBoost的版本与Flutter的版本是对应的，若是不对应使用过程当中会出现版本不匹配的错误。而后，使用flutter packages get命令将FlutterBoost插件拉取到本地。

2.1 Android集成

使用Android Studio打开新建的原生Android工程，在原生Android工程的settings.gradle文件中添加以下代码。

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  'flutter_library/.android/include_flutter.groovy'))

而后，打开原生Android工程app目录下的build.gradle文件，继续添加以下依赖脚本。

dependencies {
  implementation project(':flutter_boost')
  implementation project(':flutter')
}

从新编译构建原生Android工程，若是没有任何错误则说明Android成功了集成FlutterBoost。使用Flutter Boost 以前，须要先执行初始化。打开原生Android工程，新建一个继承FlutterApplication的Application，而后在onCreate()方法中初始化FlutterBoost，代码以下。

public class MyApplication extends FlutterApplication {


    @Override
    public void onCreate() {
        super.onCreate();

        FlutterBoost.instance().setup(this, new FlutterBoostDelegate() {

            @Override
            public void pushNativeRoute(String pageName, HashMap<String, String> arguments) {
                Intent intent = new Intent(FlutterBoost.instance().currentActivity(), NativePageActivity.class);
                FlutterBoost.instance().currentActivity().startActivity(intent);
            }

            @Override
            public void pushFlutterRoute(String pageName, HashMap<String, String> arguments) {
                Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class, FlutterBoost.ENGINE_ID)
                        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
                        .destroyEngineWithActivity(false)
                        .url(pageName)
                        .urlParams(arguments)
                        .build(FlutterBoost.instance().currentActivity());
                FlutterBoost.instance().currentActivity().startActivity(intent);
            }

        },engine->{
            engine.getPlugins();
        } );
    }
}

而后，打开原生Android工程下的AndroidManifest.xml文件，将Application替换成自定义的MyApplication，以下所示。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.idlefish.flutterboost.example">

    <application
        android:name="com.idlefish.flutterboost.example.MyApplication"
        android:label="flutter_boost_example"
        android:icon="@mipmap/ic_launcher">

        <activity
            android:name="com.idlefish.flutterboost.containers.FlutterBoostActivity"
            android:theme="@style/Theme.AppCompat"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize" >
            <meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background"/>

        </activity>
        <meta-data android:name="flutterEmbedding"
                   android:value="2">
        </meta-data>
    </application>
</manifest>

因为Flutter Boost 是以插件的方式集成到原生Android项目的，因此咱们能够在Native 打开和关闭Flutter模块的页面。

FlutterBoost.instance().open("flutterPage",params);
FlutterBoost.instance().close("uniqueId");

而Flutter Dart的使用以下。首先，咱们能够在main.dart文件的程序入口main()方法中进行初始化。

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
   static Map<String, FlutterBoostRouteFactory>
       routerMap = {
    '/': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings, pageBuilder: (_, __, ___)
          => Container());
    },
    'embedded': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings,
          pageBuilder: (_, __, ___) =>
          EmbeddedFirstRouteWidget());
    },
    'presentFlutterPage': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings,
          pageBuilder: (_, __, ___) =>
          FlutterRouteWidget(
                params: settings.arguments,
                uniqueId: uniqueId,
              ));
    }};
   Route<dynamic> routeFactory(RouteSettings settings, String uniqueId) {
    FlutterBoostRouteFactory func =routerMap[settings.name];
    if (func == null) {
      return null;
    }
    return func(settings, uniqueId);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterBoostApp(
      routeFactory
    );
  }

固然，还能够监听页面的生命周期，以下所示。

class SimpleWidget extends StatefulWidget {
  final Map params;
  final String messages;
  final String uniqueId;

  const SimpleWidget(this.uniqueId, this.params, this.messages);

  @override
  _SimpleWidgetState createState() => _SimpleWidgetState();
}

class _SimpleWidgetState extends State<SimpleWidget>
    with PageVisibilityObserver {
  static const String _kTag = 'xlog';
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('$_kTag#didChangeDependencies, ${widget.uniqueId}, $this');

  }

  @override
  void initState() {
    super.initState();
   PageVisibilityBinding.instance.addObserver(this, ModalRoute.of(context));
   print('$_kTag#initState, ${widget.uniqueId}, $this');
  }

  @override
  void dispose() {
    PageVisibilityBinding.instance.removeObserver(this);
    print('$_kTag#dispose, ${widget.uniqueId}, $this');
    super.dispose();
  }

  @override
  void onForeground() {
    print('$_kTag#onForeground, ${widget.uniqueId}, $this');
  }

  @override
  void onBackground() {
    print('$_kTag#onBackground, ${widget.uniqueId}, $this');
  }

  @override
  void onAppear(ChangeReason reason) {
    print('$_kTag#onAppear, ${widget.uniqueId}, $reason, $this');
  }

  void onDisappear(ChangeReason reason) {
    print('$_kTag#onDisappear, ${widget.uniqueId}, $reason, $this');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('tab_example'),
      ),
      body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(top: 80.0),
                child: Text(
                  widget.messages,
                  style: TextStyle(fontSize: 28.0, color: Colors.blue),
                ),
                alignment: AlignmentDirectional.center,
              ),
              Container(
                margin: const EdgeInsets.only(top: 32.0),
                child: Text(
                  widget.uniqueId,
                  style: TextStyle(fontSize: 22.0, color: Colors.red),
                ),
                alignment: AlignmentDirectional.center,
              ),
              InkWell(
                child: Container(
                    padding: const EdgeInsets.all(8.0),
                    margin: const EdgeInsets.all(30.0),
                    color: Colors.yellow,
                    child: Text(
                      'open flutter page',
                      style: TextStyle(fontSize: 22.0, color: Colors.black),
                    )),
                onTap: () => BoostNavigator.of().push("flutterPage",
                    arguments: <String, String>{'from': widget.uniqueId}),
              )
              Container(
                height: 300,
                width: 200,
                child: Text(
                  '',
                  style: TextStyle(fontSize: 22.0, color: Colors.black),
                ),
              )
            ],
          ))),
    );
  }
}

而后，运行项目，就能够从原生页面跳转到Flutter页面，以下图所示效果。

2.2 iOS集成

和Android的集成步骤同样，使用Xcode打开原生iOS工程，而后在iOS的AppDelegate文件中初始化Flutter Boost ，以下所示。

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  MyFlutterBoostDelegate* delegate=[[MyFlutterBoostDelegate alloc ] init];
    [[FlutterBoost instance] setup:application delegate:delegate callback:^(FlutterEngine *engine) {
    } ];

    return YES;
}
@end

下面是自定义的FlutterBoostDelegate的代码，以下所示。

@interface MyFlutterBoostDelegate : NSObject<FlutterBoostDelegate>
@property (nonatomic,strong) UINavigationController *navigationController;
@end

@implementation MyFlutterBoostDelegate

- (void) pushNativeRoute:(FBCommonParams*) params{
    BOOL animated = [params.arguments[@"animated"] boolValue];
    BOOL present= [params.arguments[@"present"] boolValue];
    UIViewControllerDemo *nvc = [[UIViewControllerDemo alloc] initWithNibName:@"UIViewControllerDemo" bundle:[NSBundle mainBundle]];
    if(present){
        [self.navigationController presentViewController:nvc animated:animated completion:^{
        }];
    }else{
        [self.navigationController pushViewController:nvc animated:animated];
    }
}

- (void) pushFlutterRoute:(FBCommonParams*)params {

    FlutterEngine* engine =  [[FlutterBoost instance ] getEngine];
    engine.viewController = nil;

    FBFlutterViewContainer *vc = FBFlutterViewContainer.new ;

    [vc setName:params.pageName params:params.arguments];

    BOOL animated = [params.arguments[@"animated"] boolValue];
    BOOL present= [params.arguments[@"present"] boolValue];
    if(present){
        [self.navigationController presentViewController:vc animated:animated completion:^{
        }];
    }else{
        [self.navigationController pushViewController:vc animated:animated];

    }
}

- (void) popRoute:(FBCommonParams*)params
         result:(NSDictionary *)result{

    FBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;

    if([vc isKindOfClass:FBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: params.uniqueId]){
        [vc dismissViewControllerAnimated:YES completion:^{}];
    }else{
        [self.navigationController popViewControllerAnimated:YES];
    }

}

@end

若是要在原生iOS代码中打开或关闭Flutter页面，可使用下面的方式。

[[FlutterBoost instance] open:@"flutterPage" arguments:@{@"animated":@(YES)}  ];
[[FlutterBoost instance] open:@"secondStateful" arguments:@{@"present":@(YES)}];

3、Flutter Boost架构

对于混合工程来讲，原生端和Flutter端对于页面的定义是不同的。对于原生端而言，页面一般指的是一个ViewController或者Activity，而对于Flutter来讲，页面一般指的是Flutter组件。FlutterBoost框架所要作的就是统一混合工程中页面的概念，或者说弱化Flutter组件对应容器页面的概念。换句话说，当有一个原生页面存在的时候，FlutteBoost就能保证必定有一个对应的Flutter的容器页面存在。

FlutterBoost框架其实就是由原生容器经过消息驱动Flutter页面容器，从而达到原生容器与Flutter容器同步的目的，而Flutter渲染的内容是由原生容器去驱动的，下面是Flutter Boost 给的一个Flutter Boost 的架构示意图。

能够看到，Flutter Boost插件分为平台和Dart两端，中间经过Message Channel链接。平台侧提供了Flutter引擎的配置和管理、Native容器的建立/销毁、页面可见性变化通知，以及Flutter页面的打开/关闭接口等。而Dart侧除了提供相似原生Navigator的页面导航接口的能力外，还负责Flutter页面的路由管理。

总的来讲，正是基于共享同一个引擎的方案，使得FlutterBoost框架有效的解决了多引擎的问题。简单来讲，FlutterBoost在Dart端引入了容器的概念，当存在多个Flutter页面时，FlutterBoost不须要再用栈的结构去维护现有页面，而是使用扁平化键值对映射的形式去维护当前全部的页面，而且每一个页面拥有一个惟一的id

4、FlutterBoost3.0更新

4.1 不入侵引擎

为了解决官方引擎复用引发的问题，FlutterBoost2.0拷贝了Flutter引擎Embedding层的一些代码进行改造，这使得后期的升级成本极高。而FlutterBoost3.0采用继承的方式扩展FlutterActivity/FlutterFragment等组件的能力，而且经过在适当时机给Dart侧发送appIsResumed消息解决引擎复用时生命周期事件错乱致使的页面卡死问题，而且，FlutterBoost 3.0 也兼容最新的官方发布的 Flutter 2.0。

4.2 不区分Androidx和Support分支

FlutterBoost2.0经过本身实现FlutterActivityAndFragmentDelegate.Host接口来扩展FlutterActivity和FlutterFragment的能力，而getLifecycle是必须实现的接口，这就致使对androidx的依赖。这也是为何FlutterBoostView的实现没有被放入FlutterBoost3.0插件中的缘由。而FlutterBoost3.0经过继承的方式扩展FlutterActivity/FlutterFragment的能力的额外收益就是，能够作到不依赖androidx。

4.3 双端设计统一，接口统一

不少Flutter开发者只会一端，只会Android 或者只会IOS，但他须要接入双端，因此双端统一能下降他的 学习成本和接入成本。FlutterBoost3.0，在设计上 Android和IOS都作了对齐，特别接口上作到了参数级的对齐。

4.4 支持 【打开flutter页面再也不打开容器】 场景

在Flutter模块内部，Flutter 页面跳转Flutter 页面是能够不须要再打开Flutter容器的，不打开容器，能节省内存开销。在FlutterBoost3.0上，打开容器和不打开容器的区别表如今用户接口上仅仅是withContainer参数是否为true就好。

InkWell(
  child: Container(
      color: Colors.yellow,
      child: Text(
        '打开外部路由',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
      )),
  onTap: () => BoostNavigator.of().push("flutterPage",
      arguments: <String, String>{'from': widget.uniqueId}),
),
InkWell(
  child: Container(
      color: Colors.yellow,
      child: Text(
        '打开内部路由',
        style: TextStyle(fontSize: 22.0, color: Colors.black),
      )),
  onTap: () => BoostNavigator.of().push("flutterPage",
      withContainer: true,
      arguments: <String, String>{'from': widget.uniqueId}),
)

4.5 生命周期的精准通知

在FlutterBoost2.0上，每一个页面都会收到页面生命周期通知，而FlutterBoost3.0只会通知页面可见性实际发生了变化的页面，接口也更符合flutter的设计。

4.6 其余Issue

除了上面的一些特性外，Flutter Boost 3.0版本还解决了以下一些问题：

• 页面关闭后参数的传递，以前只有iOS支持，android不支持，目前在dart侧实现，Ios 和Android 都支持。
• 解决了Android 状态栏字体和颜色问题。
• 解决了页面回退willpopscope不起做用问题。
• 解决了不在栈顶的页面也收到生命周期回调的问题
• 解决了屡次setState耗性能问题。
• 提供了Framgent 多种接入方式的Demo，方便tab 场景的接入。
• 生命周期的回调代码，能够用户代码里面with的方式接入，使用更简单。
• 全面简化了，接入成本，包括 dart侧，android侧和ios
• 丰富了demo，包含了基本场景，方便用户接入 和测试回归