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创建都是一样的。
正常情况下会显示

frc c9997eb6948a28175d543a9aaf051e05 - Flutter混合开发初体验:在已有Android项目下导入Flutter
flutter module创建成功.png
  • 第三步:在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();
  }
}

后面的内容您自己随意啦,

frc 13b206cbff4bcf6c92a8f08c770f1efb - Flutter混合开发初体验:在已有Android项目下导入Flutter
native跳转flutter.gif

遇到的问题

  1. 第2步中在settings.gradle添加内容的时候要求导入Binding类(这个类实际上在package groovy下),不必导入,直接sync编译可以通过 .
  2. 第2步中参数settingsDir,官方文档是 settingsDir.parentFile。我的my_flutter和官方文档位置不同,所以这个参数也不同。

可以hot reload

hot reload是提高flutter提高效率写大大大优点。混合开发也是可以hot reload的。

实际生产推荐flutter_boost

这篇博客实际上只是尝试一下混合开发爽一把,实际生产环境下想要混合开发最好使用已经造好的轮子。目前咸鱼开源了他们的的轮子flutter_boost,值得尝试。可以戳这里
了解。

上文Demo地址在这里 从tag1.0.0中获取

Flutter混合开发初体验:在已有Android项目下导入Flutter