前言
- 最近在使用flutter仿写公司的客户端,在一段的时间的使用后发现flutter在一些常见的控件中,很多无法满足,往往在轮子上需要耗费大量的时间,目前就我们的项目来看,相同的时间,如果改用Native去写,我觉得两者进度并没有多大的差异,可能原生端反而会更快一些。
- 在现有项目中集成Flutter,可以在flutter还没有成熟的时期,去使用,追求共通点,同时对于已有客户端进行混编
现有项目中集成Flutter
- 创建Flutter module模板(我们在一个Android项目目录同级目录下创建模板工程)
flutter create -t module my_flutter - 添加Flutter module到Android项目中
- 修改Android项目根目录的settings.gradle,将Flutter module作为一个子工程添加到项目中
// MyApp/settings.gradle
include ':app' // assumed existing content
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'my_flutter/.android/include_flutter.groovy' // new
))
- Sync一下,可以发现添加了两个module到项目中了。其中一个是flutter的module,其中包含了一些简单的封装,供Java代码调用。另一个是package_info的module,是一个Flutter插件就是获取app名称、包名、版本等信息
- 在app的build.gradle中添加依赖
// MyApp/app/build.gradle
:
dependencies {
implementation project(':flutter')
}
- Sync一下,到此,这个Flutter module就被添加到了Android项目中了
开始使用
- 在我的MainActivity.java里面写代码
// MainActivity.java
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
View flutterView = Flutter.createView(
MainActivity.this,
getLifecycle(),
"route1"
);
FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
layout.leftMargin = 100;
layout.topMargin = 200;
addContentView(flutterView, layout);
}
});
-
上面我们使用字符串“route1”告诉Dart代码在Flutter视图中显示哪个小部件。 Flutter模块项目模板的lib / main.dart文件包含提供的路由字符串,需要哪些路径字符串以及如何解释它们取决于我们自己
-效果如下所示,但是我还是有些失望,黑一下的效果的确让人难以接受,不过这项技术确实挺有吸引力,一起期待flutter的完善吧
GIF.gif
