如何进行Flutter混合开发

最新推荐文章于 2025-04-23 15:45:20 发布
最新推荐文章于 2025-04-23 15:45:20 发布
阅读量6.2k 收藏 5
点赞数 1
分类专栏： Flutter 文章标签： Flutter Android iOS 跨平台 APP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43499085/article/details/83375480
版权
本文探讨了Flutter为何受到青睐，详细分析了Flutter框架结构和Android应用的APK结构变化，并介绍了两种混合开发模式：闲鱼模式和Google模式。在闲鱼模式中，Flutter与原生代码并存，而在Google模式下，通过Flutter Module简化了插入Flutter模块的过程。文章还讨论了混合开发的挑战和解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

Why Flutter ?

在这里插入图片描述

Flutter框架与应用

框架与Source Code
整体框架

在这里插入图片描述

Source Code

在这里插入图片描述

所以从上面的分析可以看出,为了实现Flutter的平台无差异性，Google主要在 PlatForm Integration和Dart:UI部分做了适配工作。

APK(Android应用)结构

我们通过解压一个release的混合开发APK包，来探索一下加入了Flutter之后的包到底发生了哪些变化以及这些变化对应的作用是什么。

在这里插入图片描述

从上图的标记中可以清楚的看出变化点

  • 变化1

    未在图中标出，但

最低0.47元/天 解锁文章
flutter webview 与 前端vue通信
ifredom
05-28 5058
flutter有3个比较好的webview插件 webview_flutter : 是官方维护的 WebView 插件，特性是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 flutter Widget 树中，这是比较灵活的； flutter_webview_plugin : 基于原生 WebView 封装的 Flutter 插件，将原生的一些基本使用 API 封装好提供给 Flutter 调用，因此并不能内嵌于 Flutter Widget 树中，因此在
Flutter嵌入webview并与vue进行双向通信
tseng711的博客
12-09 4884
Flutter嵌入webview并与vue进行双向通信 最近在做一个将h5嵌入flutter中的项目，特此记录一下，如有不对之处，希望大家多多指正。 本篇将围绕以下两点： 插件的选择与使用 flutter与vue之间的双向通信 一、插件的选择与使用 目前flutter使用的比较多webview插件的主要有以下三个： 官方插件：webview_flutter flutter_webview_plugin flutter_inappbrowser 在插件的选择过程中，我主要比较了webview_flutt
flutter和vue3项目利用webview_flutter插件通信
最新发布
Amouzy的博客
04-23 589
近来需要实现一个功能：flutter项目的会员中心页面跳转到vue3项目的活动页，点击该活动页面的“签到”按钮后到flutter项目的积分中心页面进行签到，签到成功后手动返回上一个页面即vue3活动页面的按钮状态更新问题（需更新为“已签到”）。实现方法：通过webview_flutterwebview_flutter 是 Flutter 官方提供的一个跨平台 WebView 插件，用于在 Flutter 应用中嵌入网页内容。
Flutter 核心原理与混合开发模式
AndroidAlvin的博客
07-15 382
原创 airingdeng [腾讯音乐技术团队] 在 「Fan 直播」的 Flutter 混合开发实践中，我们总结了一些 Flutter 混合开发的经验。本文第一篇章将从 Flutter 原理出发，详细介绍 Flutter 的绘制原理，借由此在第二章来对比三种跨端方案；之后再进入第三篇章 Flutter 混合开发模式的讲解，主要是四种不同的 Flutter 混合模式的原理分析；最后的第四篇章，简单...
混合框架Flutter之 环境搭建
qq_29848853的博客
04-16 361
混合框架Flutter之 环境搭建
混合开发框架的对比，Flutter更胜一筹？，android组件化架构
2401_83739951的博客
03-31 1236
JavaScript开发+原生渲染的方式主要优点如下：采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。原生渲染，性能相比H5提高很多。动态化较好，支持热更新。渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿。JavaScript为脚本语言，执行时需要JIT，执行效率和AOT代码仍有差距。由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后；
Flutter混合开发详解
08-25
* 已有的原生应用升级：使用 Flutter 进行混合开发可以将原生应用升级到 Flutter 版本。 * 跨平台开发：使用 Flutter 进行混合开发可以实现跨平台开发，提高开发效率和降低成本。 六、结论 Flutter 混合开发是一种...
Flutter混合开发组件化与工程化架构
02-24
对于构建Flutter类型应用，因其开发语言Dart、虚拟机、构建工具与平时我们开发Native应用不同且平台虚拟机也不支持，所以需要FlutterSDK来支持，如构建Android应用需要AndroidSDK一样，下载FlutterSDK通常有两种方式...
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 ).zip
08-27
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | Activity 中嵌入 Flutter 页面 | 启动新的 Flutter 页面 ) https://hanshuliang.blog.youkuaiyun.com/article/details/119956323 博客源码快照
cordova-plugin-flutter:该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发
05-25
cordova应用与flutter混合开发 让你的cordova应用能与flutter进行混合开发 开发环境 版本 cordova ≥ 10.0.0 cordova-android ≥ 9.0.0 cordova-ios ≥ 5.0.0 flutter ≥ 1.17.0 示例代码：https://github.com/waitaction/cordovaFlutterDemo 安装 安装cordova-plugin-flutter插件 cordova plugin add cordova-plugin-flutter 安装完之后会产生flutter_module文件夹，不要去修改flutter_module文件夹名称 安装过程可能会卡住，等一小会就正常 编译android cordova build android 编译过程中会下载jar包，可能需要几分钟时间... 编译ios cordo
Android&Flutter混合开发
跟着哆啦学Android
05-30 1518
混合开发简单来说就是，既有Flutter的Dart代码，又有平台相关的原生代码，如Kotlin、Swift。在改动比较小，且追求极致体验的主要功能模块，采用原生开发，搭建一个所谓的“壳”。然后在一些经常变动的界面，如应用的首页、活动页面，以及简单的UI界面，如设置界面、关于界面，使用Flutter进行开发。这样做的好处就是可以降低错误率，提高开发效率，缩减开发周期，提升产品竞争力和快速抢占市场的能力。
flutter中用flutter_inappbrowser嵌入Vue项目，无法加载iframe页面
luck_yangl的博客
09-29 3957
标题flutter中用flutter_inappbrowser嵌入Vue项目，无法加载iframe页面 再项目开发中遇到一个问题，需要在flutter项目中的一块区域放k线图，由于flutter做股票那样的k线图难度挺大，也没有找到合适的插件，所以最后决定用webview嵌入一个html页面进来。 在嵌入页面的时候一切正常，最后加上数据请求的时候发现K线图并没有渲染出来。。。 后来发现html页面...
vue与flutter交互——vue
qq_42905523的博客
12-27 5351
一. vue向flutter发送消息 定义一个方法，在方法内部使用如下语句即可。注意‘MessageDeal’方法名要与flutter端定义的方法名一致 MessageDeal.postMessage('4') // 向flutter发送数字4 二. vue接收来自flutter的消息 注意‘flutterCallJsMethod’方法名要与flutter端定义的方法名一致 暴露方法名 // 在挂载时将方法名挂载到window上，把方法名暴露给flutter mounted() { window.f
Flutter-native混合开发（二）
蓝色天空
05-06 420
ios Hybrid工程搭建 1、和flutter_odule平级目录创建iosNative目录 2、初始化Podfile文件:native工程跟目录执行 pod init 3、配置PodFile flutter_application_path = '../flutter_module/' eval(File.read(File.join(flutter_application_path,...
Flutter混合开发
xiangzhihong8的专栏
01-21 2993
混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情，但对于一些成熟的产品来说，完全摒弃原有App的历史沉淀，全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈，把它作为已有原生App的扩展能力，通过有序推进来提升移动终端的开发效率。 目前，想要在已有的原生App里嵌入一些Flutter页面主要有两种方案。一种是将原生工程作为Flutter...
flutter技术解析与实战！史上最强vue总结来了，威力加强版_flutter vue
2401_84166278的博客
04-17 377
他说不知道没听过，最后问了一句期望薪资他说25k，我不知道问什么了，于是匆匆结束了面试。这个阶段有不会的很正常，因为对方正在确定你的水平，但态度一定要积极主动，即使之前没有研究过，也要结合一些经验说出推测的结果，切忌直接说“我不会”。IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！面试中级及以下岗位时，在电话面试、一面、或者你简历没有突出亮点时，一般都会先问基础，目的是确定你基本功扎不扎实。
Flutter混合开发二-FlutterBoost使用介绍
weixin_34113237的博客
05-30 1474
前言 《Flutter混合开发专题一》中我们介绍了Flutter官方提供的混合开发解决方案，但是其存在着一些问题并没有解决，比如原生和Flutter页面叠加跳转由于Flutter Engine重复创建而导致内存暴增的问题、Flutter应用中全局变量在各独立页面不能共享的问题、iOS平台内存泄露的问题等等，目前官方在混合开发解决方案上并没有花太多的时间去改进优化。 国内很多大厂在去年已经开始研究F...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值