Flutter Boost 3.0混合开发
Posted 一叶飘舟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter Boost 3.0混合开发相关的知识，希望对你有一定的参考价值。
一、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不执行，内存占用过低等。
二、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)];三、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
四、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，蕴含了根本场景，不便用户接入 和测试回归
集成过程中可能出现的问题
在下面文章中，详细讲述了flutter_boost老版本的接入方式， https://blog.csdn.net/lzw398756924/article/details/113245174
https://blog.csdn.net/lzw398756924/article/details/113245174
问题1——为什么我的Flutter Module中怎么没有.android和.ios目录？
原来这个跟flutter module的创建方式有关。
创建flutter module的时候不要用android studio创建，要用命令创建：
flutter create -t module flutter_module在flutter_module工程中添加执行如下命令，拉取flutter依赖：
flutter packages get注意：这一步比较重要，flutter会帮我们执行创建.android、.ios等默认的文件目录。这些文件目录中包含了后续步骤需要使用的include_flutter.groovy等文件。
当然大家会发现通过命令创建的flutter_module也有个问题，没有android和ios的目录，这个就需要我们使用android studio在其他目录下创建一个同名flutter_module工程，然后把android和ios的目录全部拷贝到原来的工程下即可。
2.Exception: Gradle build failed to produce an .apk file. It's likely that this file was generated under /Users/lizhixian/Documents/FlutterProjects/flutter_module/build, but the tool couldn't find it.
pubspec.yaml里面的module注释掉即可
#module: # androidX: true # androidPackage: com.example.my_flutter # iosBundleIdentifier: com.example.myFlutter
注意：这个问题只会在flutter run的时候会出现，也就是单独运行flutter工程时出现。注释掉module模块后，工程下的.android、.ios目录神奇的消失了，取消注释module，flutter pub get后就又自动出现.android、.ios目录了，如果是混合开发，从Android工程侧运行工程，则不能注释module的配置。
以上是关于Flutter Boost 3.0混合开发的主要内容，如果未能解决你的问题，请参考以下文章