flutter混合,flutter混合开发打包ipa

ios flutter 混编

最近在集成flutter进项目

金台网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。成都创新互联公司从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

以收集编译产物并以cocopods方式集成

产物大概放入两个pod库

这个暂且叫pod1，pod1放flutter.framework，第三方plugin.a，自己写的基础plugin，比如networking，hud等等（由于是混编，不可避免存在很多原生基础组件，所以能公用的基础组件都会弄一个flutter-plugin桥接）

第二个pod2放编译之后的app.framwork,注册文件GeneratedPluginRegistrant，以及各个业务模块.a（有可能没有）结构大概如下面

podspec大概如下

主工程引入这两个pod库即可

接下来从零开始搭建上文所说的

先创建一个flutter module

这个是主flutter工程，用来集成businessModule以及生成app.framework

结构如下图

再生成一个业务工程

注意此时还需要进入example生成ios和Android工程，不然无法单独编译运行

这样这个单独的业务模块就可以单独跑起来了

此时主flutter工程和业务工程均搭建完毕

在主工程pubspec.ymal文件讲两个工程关联

好了接下来就是编写脚本收集产物了

编译完成之后会在flutter主工程product生成如下文件

将上面文件分类收集做成文章开头的pod1，pod2 ，在native工程引入即可

在集成flutter的过程中踩不少坑也阅读很多前辈的文章，在此一并感谢

做混合的话Uniapp和Flutter我应该学哪个啊？

Uniapp目前比较成熟，而且用的是Vue语法，学习成本比较低，而且行业里面用的也比较广泛，而Flutter的话，学习成本略高，因为要学习新的语言，还有就是目前生态不是特别完备，等他再发展发展吧。黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。您的采纳是对我成长的鞭策

Flutter混合开发实战

之前开发了一个纯Flutter的项目，结果接到个新的需求需要使用Flutter单独开一个模块集成到原有的android项目中

下面分享一下如何集成现有的项目和如何继承以及碰到的问题

1.首先第一步修改gradle

因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃

2.新建一个FlutterModel的工程

2.使用aar文件因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的

说以我们需要打包aar并上传服务器

上传完成后在android中引用

在开发中遇到的问题

1.关于android和Ios中的跳转传参问题

这个问题在android端还是比较方便的但是的在Ios端并不怎么好实现

最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作

flutter_boost github地址：

集成文档：

集成文档给出了但是没有android的尴尬

下满分享下android的集成

（1）在flutter的 pubspec.yaml工程中添加

（2）修改android工程

使用本地工程的时候需要在工程共添加

使用aar的时候不需要添加

（3）在android工程中添加对应的条状路由配置

（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况

所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画

（5）跳转并传参

//params 传多个参数可以使用json的形式

2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象

解决方式：1.服务换证书（但是后台太忙暂时没有支持的人员）

2.ios使用原生的loading解决

3.在使用dio的时候出现ios部分手机网络请求缓慢问题

解决方法：请求的时候使用http 2.0协议

插件地址：

「编程工具」Flutter-Native 混合解决方案 FlutterBoost

FlutterBoost 是一个Flutter 插件，它可以轻松地为现有原生应用程序提供 Flutter 混合集成方案。FlutterBoost 的理念是将 Flutter 像 Webview 那样来使用。在现有应用程序中同时管理 Native 页面和 Flutter 页面并非易事。 FlutterBoost 帮你处理页面的映射和跳转，你只需关心页面的名字和参数即可（通常可以是 URL）。

概念

所有页面路由请求都将发送到 Native 路由器。Native 路由器与 Native Container Manager 通信，Native Container Manager 负责构建和销毁 Native Containers。

使用 Flutter Boost Native Container 用 Native 代码打开 Flutter 页面

Android

或者用 Fragment

使用 Flutter Boost 在 dart 代码打开页面

Dart

使用 Flutter Boost 在 dart 代码关闭页面

Flutter（六）Android与Flutter混合开发（Hybird）

如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？

假设你现在Android项目的目录的结构是这样的

这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为

也就是说，最终你的项目结构会是这样的

接下来在Android Module的 build.gradle 文件中添加flutter依赖

先创建一个Flutter页面

这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数（下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发

我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注册 FlutterActivity

自己创建一个 FlutterAppActivity 继承自 FlutterActivity

在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）

两种启动方式的区别

如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式

扩展思考

initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情

activity_main.xml

FrameLayout 用于承载Flutter组件

MainActivity.java

使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中

运行结果

上半部分是原生的TextView，下半部分是Flutter的Text组件

本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互