Flutter&DartFlutter

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

2019-12-18  本文已影响0人  哥哥是欧巴Vitory

方法一: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,如果你走到这里,恭喜你,大功告成!

上一篇下一篇

猜你喜欢

热点阅读