成都创新互联网站制作重庆分公司

flutter协作开发,flutter原生混合开发

Flutter自制工具之fluct助力Flutter快速开发神器

一个帮助开发Flutter应用程序的工具

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、网站制作、黑龙江网络推广、成都小程序开发、黑龙江网络营销、黑龙江企业策划、黑龙江品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供黑龙江建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

.----------------------------------------------

| github地址:

|

| pub地址:

|

`----------------------------------------------

该工具无需添加到依赖项中,我们只需要 激活 即可,使用如下命令:

fluct 目前只有两个命令 create 和 gen-assets

在 Flutter 开发过程中,我们创建文件是必须的,而AS自带的创建文件,并没有自动的生成相关的内容,这会让开发者非常的苦恼,类名还需要自己手动敲的话,而该命令,直接可以一步到位。

当运行此命令后,命令行会输出以下内容

可以看到,该命令输出的内容是简单易懂的,我们来简单使用一下吧。

创建 IndexPage 页面,继承自 StatefulWidget ,可以使用如下命令:

运行成功之后,我们会在项目下找到 index_page.dart 文件,内容为:

当然,你也可以指定哪个文件夹,例如,我要在./lib/src/page 文件夹下创建 IndexPage ,使用如下命令

在开始之前,我们需要在项目根目录下新建一个 fluct.yaml 文件,因为 fluct create -t custom 命令会找到它,内容如下:

这里,我声明了 inh 命令,然后运行这个命令之后会在生成文件的时候添加 inh 对应的内容,内容中我们值得注意的是 $NAME$ 占位符,该字符串会被替换成根据文件名生成的内容,例如: index_page 会插入 IndexPage 到 $NAME$ 占位符中,最后,我们运行以下命令:

运行成功之后,我们能够在根目录下找到 index_inherited.dart 文件,内容也是对应的自定义内容

我们在使用资源文件时,需要在 pubspec.yaml 文件声明资源文件的路径

例如:我在 ./assets/images 文件夹下添加 a.png 图片,需要在 pubspec.yaml 文件下声明

或者使用文件夹路径

这一步如果文件多起来,很容易出现混乱,导致声明麻烦,引用麻烦,并随着项目的迭代,资源文件有些不用了,也不知道哪个是哪个,这个时候, fluct gen-assets 命令帮到你

当运行 fluct gen-assets -h 会输出以下内容

到此,你已经拥有了自动资源绑定的功能了,输入 fluct gen-assets 即可

所有的内容都声明好了, very good ~

有小伙伴可能会疑惑, fluct create 运行之后会发现未找到命令,可能你使用了 flutter pub global activate fluct 命令激活,这个时候,我们可以使用 flutter pub run fluct create 运行

flutter开发体验总结

flutter目前最火的混合开发技术,作为苦逼的移动开发人员了解下总是没有错的,针对最近自己的学习,进行相关总结,希望在座的看官,看完此文后,能对flutter移动开发有个大概的了解,希望能给你开发flutter带来个大体的认知,由于学习接触时间不过,如有讲错的地方,请在评论区指出,谢谢;

注:经过多重比较,个人觉得AS是比较适合flutter移动开发的,集成方便,插件支持多,不亏是google大佬的亲儿子,安卓开发人员过渡也比较方便;

程序入口指定,也可以指定为别的widget;

从左往右的功能对应:

在文章开篇的时候,我有提过,在flutter开发里面,可谓一切界面皆是widget,对于安卓开发人员,可以理解为增强版fragment(碎片),基本所有的和界面相关的实现都在当中实现。

说到widget就必须聊到今天一个很重要的主题,StatelessWidget, StatefulWidget,因为大部分界面的实现都需要通过集成他们来实现界面显示。

注:有前端用flex开发使用的经验的同学,完全可以参考flex属性使用。

flutter 插件开发

new flutter project,选择Flutter Plugin,next,输入插件名,包名,运行平台及编写语言,finish!

如上图,笔者的插件名为log_plugin,选用Android,java语言开发

在自动打开和插件名同名的dart文件,声明要使用其他语言的方法,本例使用java 语言实现Android原生的log输出

编辑 android/src/main/java/com/whh/log_plugin/LogPlugin.java

在onMethodCall方法中,区别声明方法名,以实现该方法逻辑

至此,简单的插件开发完成,接下来测试

example是插件测试工程,打开其中的main.dart

打开已有的或者新建一个flutter app project,在其pubspec.yaml引入插件

使用pub get 关联到插件

详见官网文档

此文为 flutter 初学者记录学习过程,附上 github ,小小分享~

每天进步一点点。。。(2021-08-10)

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(六)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进行数据交互


分享标题:flutter协作开发,flutter原生混合开发
本文路径:http://cxhlcq.com/article/hoiide.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部