Flutter Android 混合开发记录


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

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' ) 





资料来自慕课网. 

推荐阅读更多精彩内容

  • 混合开发Flutter集成步骤 创建Flutter module 添加Flutter module依赖 在Java...
    YangDxg阅读 973评论 0 2
  • 前言 本文主要介绍 Flutter 与 Android 的混合开发,关于 Flutter 与 iOS 的混合开发后...
    南小夕阅读 1,529评论 1 10
  • 看到网上有篇小编的文章《为什么“私立学校”的学生成绩普遍较高?这3点原因你知道吗》。不敢完全苟同。 其实,这个问题...
    eea5ba0722ee阅读 346评论 0 1
  • “淡泊名利,随遇而安” 对于有些人,这是精神境界, 而对于有些人,这是逃避一切的借口。 这世界就是这么现实, 而人...
    桃之夭0310阅读 58评论 0 0
  • 当你看到这篇日记时我应该已经浑然入睡,可能还做着美梦,也有可能是噩梦,至少今天是被吓醒的。 当夜幕降临,你联系不上...
    阅微日记阅读 101评论 0 0
  • 石涛,号大涤子,清湘老人等。是清代四僧之一 。他的绘画风格最为多变,技法丰富。在绘画史上是最有创新意识的画家,影响...
    半樵阅读 375评论 8 20
  • 客户财务背景: 小胖和媳妇,都属于工薪一族,双方父母都健在,有一个3岁大的宝宝,一家7口,其乐融融!媳妇的父母单独...
    花无缺Wendy阅读 776评论 1 16