Flutter Android 混合开发实战-集成与调用

一、

在Android 项目中集成Flutter

1、打开Gradle Scripts下的settings.gradle

Flutter Android 混合开发实战-集成与调用_第1张图片

 

2、在settings.gradle中添加如下代码

Flutter Android 混合开发实战-集成与调用_第2张图片

 

下面所配置的路径一定要与项目的路径一致,也就是说这个flutter_module一定要与FlutterHybirdAndroid原生工程在同一个目录下

setBinding(new Binding([gradle:this]))
evaluate(new File(settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

3、打开项目的build.gradle

Flutter Android 混合开发实战-集成与调用_第3张图片

将minSdkVersion的版本改为16,因为flutter支持的最低版本是16

Flutter Android 混合开发实战-集成与调用_第4张图片

 

配置java的编译版本,使用java8进行编译

Flutter Android 混合开发实战-集成与调用_第5张图片

    compileOptions{
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

添加下面依赖

虽然项目中并没有创建flutter项目,但是上面在settings中配置的setBinding()和evaluate()会帮我们自动关联到一个flutter模块

Flutter Android 混合开发实战-集成与调用_第6张图片

 

运行项目:

运行成功说明flutter依赖添加是成功的

Flutter Android 混合开发实战-集成与调用_第7张图片

 

二、在java中调用Flutter module

在java中调用Flutter模块有两种方式:

--使用Flutter.createView API的方式

--使用FlutterFragment的方式

 

 

1、

Flutter Android 混合开发实战-集成与调用_第8张图片

 

2、

Flutter Android 混合开发实战-集成与调用_第9张图片

 

上面我们使用字符串“route1"来告诉Dart代码在Flutter视图中显示哪个小部件。Flutter模块项目的lib/main.dart文件需要通过window.defaultRouteName来获取Native指定要显示的路由名,以确定要创建哪个窗口小部件并传递给runApp:

三、在Android项目中调用flutter

1、在Android布局中添加占位符

Flutter Android 混合开发实战-集成与调用_第10张图片

 

2、添加调用Flutter的代码

Flutter Android 混合开发实战-集成与调用_第11张图片

                FragmentTransaction tx=getSupportFragmentManager().beginTransaction();
                tx.replace(R.id.someContainer, Flutter.createFragment("{name:'devio',dataList:['aa','bb','cc']}"));
                tx.commit();

3、

运行结果:

Flutter Android 混合开发实战-集成与调用_第12张图片

 

点击test按钮后,加载flutter界面

Flutter Android 混合开发实战-集成与调用_第13张图片

 

四、

Flutter Android 混合开发实战-集成与调用_第14张图片

 

五、为已存在的Android应用添加Flutter module依赖

Flutter Android 混合开发实战-集成与调用_第15张图片

 

Flutter Android 混合开发实战-集成与调用_第16张图片

 

Flutter Android 混合开发实战-集成与调用_第17张图片

 

Flutter Android 混合开发实战-集成与调用_第18张图片

 

 

 

 

注:

1、在dart中通过window.defaultRouteName来获取Native传过来的参数

要使用window对象一定要导入包‘dart:ui’

Flutter Android 混合开发实战-集成与调用_第19张图片

 

在MyApp中作为参数传递给MyHomePage

Flutter Android 混合开发实战-集成与调用_第20张图片

 

在MyHomePage中,通过initParams展示了传递过来的内容

Flutter Android 混合开发实战-集成与调用_第21张图片

 

运行后结果

Flutter Android 混合开发实战-集成与调用_第22张图片

 

 

 

你可能感兴趣的:(笔记,flutter)