美文网首页Flutter&DartFlutter
哥哥手把手教你Android原生项目集成Flutter,耶 !

哥哥手把手教你Android原生项目集成Flutter,耶 !

作者: 哥哥是欧巴Vitory | 来源:发表于2019-12-18 14:16 被阅读0次

    方法一:aar集成

    1,Android原工程需要使用Java8编译

    在工程 build.gradle里面,android{ }下修改

    2,生成aar文件

    这一步需要先将Flutter Module生成aar,在Flutter Module的根目录下运行一下命令:

    flutter build aar

    3,使用aar

    主工程的 build.gradle repositories 闭包 里面加入

    然后把aar包复制到libs目录下面, app 的build.gradle里面添加依赖

    编译成功,就是大功告成

    二,源码方式集成,直接引入Flutter Module

    1、 依次点击左上角的File --> New --> New Flutter Project

    2、然后选择Flutter Module。

    3,在项目根目录settings.gradle文件中配置:

    官网在跟项目同级创建 flutter module 是没问题的。但是我们现在改了,应该怎样设置呢?

    Tips:注意相对路径的使用,重点是找到 include_flutter.groovy

    案例一:

    在 settings 所在目录有 sub/my_flutter/.android/include_flutter.groovy 文件:

    案例二:

    在 settings 所在目录的父目录有 MyApp/sub/my_flutter/.android/include_flutter.groovy 文件

    在APP下的Gradle文件中添加:

    完成这几步就顺利完成在原生项目中集成flutter module了

    -------------------------------------------------------------------------------------------------------------------------------------

    接下来讲原生界面与Flutter界面的跳转:

    安卓原生界面跳转到flutter界面有两种方式,一种是使用flutterView,另一种是使用 FlutterFragment  

    先新建一个activity,在oncreate方法中加入以下代码:

    Flutter.createView()方法返回的是一个FlutterView,它继承自View,我们可以把它当做一个普通的View,调用addContentView()方法将这个View添加到Activity的contentView中。我们注意到Flutter.createView()方法的第三个参数传入了"flutter Route1"字符串,表示路由名称,它确定了Flutter中要显示的Widget,接下来需要在之前创建好的Flutter Module中编写逻辑了,修改main.dart文件中的代码

    在runApp()方法中通过window.defaultRouteName可以获取到我们在Flutter.createView()方法中传入的路由名称,即"flutter Route1",之后编写了一个_widgetForRoute()方法,根据传入的route字符串显示相应的Widget。

    最后在Mainacivity中加入跳转事件:

    最后发现原生的标题栏还在,在style中加入透明标题栏样式

    OK,如果你走到这里,恭喜你,大功告成!

    相关文章

      网友评论

        本文标题:哥哥手把手教你Android原生项目集成Flutter,耶 !

        本文链接:https://www.haomeiwen.com/subject/lcmynctx.html