本文资料 图片等均来自来自慕课网

1. 创建 Flutter module 

在做混合开发之前我们首先需要 创建 一个 Flutter module.

假设你的Native 项目是这样的: xxx/flutter_hybrid/Native项目: 

执行以下命令:

cd xxx/flutter_hybrid/Native

flutter create -t module flutter_module

上面代码会切换到你的Android/iOS项目的上一级目录, 并创建一个futter 模块:

图片来自慕课网

上面是flutter_module中的文件结构, 你会发现它里面包含.android 和 .ios, 这两个文件夹是隐藏文件, 也是这个flutter_module的宿主工程:

* .android  -  flutter_module的Android宿主工程;

*.ios  -  flutter_module的iOS宿主工程;

* lib   -   flutter_module的Dart部分的代码;

*pubspec.yaml  -  flutter_module的项目依赖文件;

因为宿主工程的存在, 我们这个flutter_module在不加额外配置的情况下是可以独立运行的, 通过安装了Flutter和Dart插件的Android Studio (或者VS Code) 打开flutter_module项目, 运行.

2.1 Flutter Android 混合开发

1. 用Android Studio 打开 flutter_module的安卓 宿主工程, 在settings.gradle文件下 添加 Flutter module的 依赖配置, 代码如下:

2.1添加 Flutter module的 依赖配置 (来自慕课网)

setBinding 和 evaluate 允许Flutter模块包括它自己在内的任何插件, 在settings.gradle中以类似:  flutter , 祝英台age_info ,  :video_palyer的方式存在.

2. 在安卓主工程的 build.gradle(Module: app)的dependencies节点 下, 添加flutter module的依赖, 代码如下: 

2.2 添加依赖(来自慕课网)

2.2. 在Java中调用Flutter module

经过上面2个步骤, 已经为Android项目添加了Flutter必须的依赖, 接下来要在Java中调用Flutter 模块: 

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

* 使用Flutter.createView API的方式: 

Flutter.createView示例代码(来自慕课网)

* 使用FlutterFragment的方式

FlutterFragment(来自慕课网)

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

(来自慕课网)

2.3调用Flutter module时传递参数

在上文中, 无论通过是使用Flutter.createView 还是 FlutterFragment的方式, 都允许加载flutter module时传递一个String类型的initialRoute参数, 如何传递其他参数呢?

FragmentTransaction tx = getASupportFragmentManager().beginTransaction();

tx.replace(R.id.someContainer, flutter.createFragment( "{name:'devio',  dataList:['aa', 'bb', 'cc']}"));

tx.commit();

然后在Flutter module 通过如下方式获取: 

import  'dart.ui ' // 要使用window对象必须引入

String initParams =  window.defaultRouteName;

2.4 编写运行Dart代码 

2.5 热加载和热重启

2.5.1 混合开发项目怎么启用热加载和热重启?

* 打开一个模拟器 , 或者连着设备到电脑 

* 关闭App, 然后运行Flutter attach;

(ps: 如果电脑连接多个设备 Flutter attach -d '设备ID' ) 

资料来自慕课网.