Flutter体验
尝试过flutter方知编程真爱,dart用起来就是爽~
看到我这篇博客的同学肯定是对flutter有过一些了解,所以不再赘述,直接开干。
为何要混合开发
公司的祖传代码,各种库,sdk一般还是java写的,所以向flutter迁移还需要时间,当然flutter也需要时间完善自身,这是一个渐进式的过程。
开始导入
- 第一步:(默认同学们已经配置好了flutter环境) 参考官网文档
- 第二步:在我自己已有的Android项目AdvancedAndroid工程下Terminal内输入命令
flutter create -t module my_flutter
实际上Android Studio近期版本(比如我的AS 3.3.1)已经集成了创建flutter module的功能,使用AS创建都是一样的。
正常情况下会显示
- 第三步:在settings.gradle下添加
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir,
'tip_flutter/.android/include_flutter.groovy'
))
注意参数settingDir和官网介绍的不一样,因为我的my_flutter工程在AdvancedAndroid工程目录下。
- 第四步:在app/build.gradle中添加
api project(':flutter')
虽然module不是这个名字,现在也是这么写
- 第五步: 添加FlutterView。在app下创建一个TestFlutterViewActivity和对应的xml,xml中添加一个id = iv_fab的 ImageView,将FlutterVie添加进去
findViewById(R.id.iv_fab).setOnClickListener(v -> {
View flutterView = Flutter.createView(
TestFlutterViewActivity.this,
getLifecycle(),
"route1"
);
LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
addContentView(flutterView, layout);
});
- 第六步:在main.dart中添加对应的路由项。
现在进入到my_flutter Module下,找到main.dart,添加上与"route1"
Widget _widgetForRoute(String route) {
switch (route) {
case 'route1':
return MyApp();
default:
return MyApp();
}
}
后面的内容您自己随意啦,
native跳转flutter.gif
遇到的问题
- 第2步中在settings.gradle添加内容的时候要求导入Binding类(这个类实际上在package groovy下),不必导入,直接sync编译可以通过 .
- 第2步中参数settingsDir,官方文档是 settingsDir.parentFile。我的my_flutter和官方文档位置不同,所以这个参数也不同。
可以hot reload
hot reload是提高flutter提高效率写大大大优点。混合开发也是可以hot reload的。
实际生产推荐flutter_boost
这篇博客实际上只是尝试一下混合开发爽一把,实际生产环境下想要混合开发最好使用已经造好的轮子。目前咸鱼开源了他们的的轮子flutter_boost,值得尝试。可以戳这里
了解。
上文Demo地址在这里 从tag1.0.0中获取
网友评论