当前位置: 首页 > news >正文

Flutter For Web实践

1 什么是Flutter

Flutter是Google开源的一套UI工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动APP、web、桌面和嵌入式平台。Flutter和其他的跨平台解决方案的实现方式上有比较大的差异。

我们以React Native(下文简称RN)跨平台解决方案为例。在RN中,开发者使用JavaScript(JS)语言来开发,中间会有一层桥接层(Bridge),桥接层的主要作用就是提供一套完整的接口,使得JS代码可以直接使用移动端提供的UI组件和相关的API方法,并通过将这些组件进行组合,来最终实现整个页面的展示。

在这里插入图片描述
Flutter却没有使用移动端平台提供各种UI组件,而是将UI组件的具体实现上移到Flutter的Framework层中,然后调用平台提供的底层绘制引擎来直接绘制在Framework中生成的各种UI组件。这样可以在最大程度上保证同一套代码在不同平台、不同设备的UI展示和用户体验的一致性。不过除了UI绘制以外,Flutter在其他原生能力的桥接上面与其他的跨平台方案基本类似。

在这里插入图片描述
在Flutter的整个解决方案中,Flutter For Web和Flutter For Mobile的实现方式又有些不同。因为Flutter For Web是需要最终嵌入到浏览器中进行绘制和展示的。因此它的很多能力依赖于浏览器对外提供的接口和能力。但是和iOS、Android不同,浏览器并没有提供一套广泛使用、完备、高效的绘制接口,这就使得Flutter For Web和Flutter For Mobile在架构上还是有比较大的差别的。

2 Flutter For Web

Flutter For Web的目的就是想要在 单代码库 的情况下,使Flutter拥有Web支持的能力。这样使用Flutter开发的应用不但能部署到iOS、Android手机上,还可以部署到任意的Web服务器上、嵌入到浏览器中,而不需要特殊浏览器插件的支持。

Flutter For Web和Flutter For Mobile的上层实现基本类似,但是在下层的实现有很大的差别。Flutter For Mobile中的绘制是使用了Engine中的Dart、Skia和Text,然后再调用iOS和Android提供的底层绘制能力来实现的。
在这里插入图片描述
对于浏览器环境,没有提供一套完备的绘制接口,因此在绘制过程中,会使用Cavans、Dom或者两者混合的方式来进行绘制。
在这里插入图片描述
在Flutter For Web的实际的开发和绘制流程中,首先开发者使用Dart语言进行开发,开发完毕在编译的过程中会通过dart2js的库,将dart实现的代码转换成对应的js代码。在js代码中,会将一些简单的可以通过HTML和CSS来实现的UI组件通过HTML和CSS来进行绘制,而一些复杂的UI组件则会使用Canvas来直接进行绘制,然后通过生成Dom树,最终在浏览器中进行渲染。
在这里插入图片描述
但是由于很多复杂的组件在dart2js的转换过程中难以使用HTML+CSS进行绘制,因此会导致很多组件最终是直接通过Canvas绘制的,同时这也会导致使用Dart开发的Web应用在效率上会存在一些问题。这也是Flutter For Web现存的一个问题,官方也一直在优化和寻找解决方案过程中。

3 代码结构

对于增加了对Flutter For Web支持的Flutter应用,在代码目录中增加了一个Web文件夹,其中index.html 文件是整个Web应用的入口。其中引用了一个JS文件是main.dart.js,但在工程目录中找不到该文件。其实这个文件是Flutter工程编译后生成的js文件,如果曾编译成功过这个工程,会在编译后的build文件夹中看到该js文件。

和普通的Flutter应用一样,主要的功能实现还是在工程中的lib文件夹中。但是如果需要有资源文件、js 文件等 web 所需资源,可以放到Web这个文件夹中。

4 编译后的产物

Flutter For Web应用编译后的产物位于build文件夹下的web目录中。其中assets和icon文件夹中是Web应用的资源文件。index.html文件,是整个Web应用的入口,而main.dart.js是dart代码编译后产生的js文件。

其中main.dart.js文件的大小是2.6M,对于一个功能不是特别复杂的web应用来说是很大的一个JS文件了。因此首次加载的时候,可能会需要很长的时间,这也是官方需要进一步优化的地方。

5 Flutter For Web开发遇到的问题

1.有部分库在Flutter web中不支持。

例如:dart.io无法在web中使用,dart.io支持非web应用程序的文件、套接字、HTTP和其他I/O操作。

2.有部分库只能Flutter web中使用。

例如:dart:html是关于html相关操作的库,如document、ua、cookie等。

又如:dart:js是dart和JS进行交互的库,可以给js方法传参,甚至还可以将js的参数带回等待。

因此这就会给我们通过一套代码来实现多平台的兼容,带来了不少的挑战。

6 与移动客户端开发的区别

虽然使用Flutter进行web开发和进行移动端开发在绝大多数情况下没什么区别,但是两者在开发中还是有不少需要注意的地方。

现在支持Flutter web的第三方库相对较少,绝大多数的库还是暂时只支持移动端开发。

Flutter web中的Cookie管理实际上是由浏览器来管理的,因此无法像客户端开发一样,自由设置cookie。

跨域访问的问题:一个web页面通过JavaScript发起的ajax请求,URL的域名必须和当前页面完全一致,这能有效的阻止跨站攻击。

7 性能

Flutter For Web 目前都是单页面应用。最简单的web应用编译后main.dart.js 的大小也会轻松过 1M,这可能会导致首次加载很慢。其次,因为页面中的很多组件其实是使用 canvas 直接绘制的,和通过HTML+CSS的web应用相比绘制的速度也会变慢,从而导致性能问题。PC 端首次加载的速度略慢,而手机端会有超过 2S 的延迟。复杂列表滑动的时候帧率也只有十几帧/秒,所以此处还有待官方后面对性能进行优化。

8 总结

优点

  • (1)一个代码库可以同时支持手机端和Web端;

  • (2)自适应的布局;

  • (3)支持PWA;

  • (4)绝大多数的官方组件支持Web;

-(5)降低人力成本、提高开发效率。

缺点

  • (1)性能问题,虽然在不断优化;

  • (2)对SEO并不友好;

  • (3)社区比较小,开发者较少;

  • (4)SDK体积大、加载时间长;

  • (5)调试比较困难。

相关文章:

Flutter For Web实践

1 什么是Flutter Flutter是Google开源的一套UI工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动APP、web、桌面和嵌入式平台。Flutter和其他的跨平台解决方案的实现方式上有比较大的差异。 我们以React Native(下文简称RN&…...

【神级Python代码】作为技术xiao白如何制作一款超炫酷的黑客主题代码雨?牛逼就完了。(源码分享学习)

前言 哈喽,我是木子,今天给大家制作一款超级炫酷的代码啦。 提到《黑K帝国》,字符雨可谓是让人印象深刻。 所有文章完整的素材源码都在👇👇 粉丝白嫖源码福利,请移步至CSDN社区或文末公众hao即可免费。 ​…...

供应链挑战迎刃而解!桑迪亚国家实验室使出“量子杀手锏”

桑迪亚国家实验室的科学家Alicia Magann(右),Kenneth Rudinger(左上),Mohan Sarovar(左下)和Matthew Grace(未附图)开发了基于反馈的量子优化算法&#xff08…...

java程序设计-ssm博客管理系统

博客管理系统是一个用于创建、管理和发布博客文章的应用程序。它通常包括一个后台管理界面,用于管理用户、文章、评论、标签等数据。同时,它还包括一个前端界面,用于展示博客文章并提供交互功能,例如评论和分享。 博客管理系统可…...

从0到1一步一步玩转openEuler--17 openEuler DNF(YUM)检查更新

文章目录17.1 检查更新17.2 升级17.3 更新所有的包和它们的依赖DNF是一款Linux软件包管理工具,用于管理RPM软件包。DNF可以查询软件包信息,从指定软件库获取软件包,自动处理依赖关系以安装或卸载软件包,以及更新系统到最新可用版本…...

SpringBoot-自动配置-@Import注解与@EnableAutoConfiguration注解

Import注解 Enable* 底层依赖于 Import 注解导入一些类,使用 Import 导入的类会被 Spring 加载到 IOC 容器中Import 提供了4种用法: 1.导入Bean2.导入配置类3.导入ImportSelector实现类;一般用于加载配置文件中的类4.导入ImportBeanDefinitio…...

【笔记】C#一维数组、多维数组和交错数组的区别总结

文章目录前言数组的概念1,一维数组:2,多维数组:3,交错数组:区别总结结语前言 😄大家好,我是writer桑, 这是自己整理的 C# 数组笔记,方便自己学习的同时分享出…...

【SpringBoot】分布式日志跟踪—通过MDC实现全链路调用日志跟踪

一.MDC 1.MDC介绍 MDC(Mapped Diagnostic Context,映射调试上下文)是 log4j 和 logback 提供的一种方便在多线程场景下记录日志的功能。MDC 可以看成是一个与当前线程绑定的Map,可以往其中添加键值对。MDC 中包含的内容可以被同…...

【设计模式】创建型模式

简单工厂模式 系列综述: xxxxxxxxx 文章目录对象创建型模式简单(静态)工厂模式工厂方法模式参考博客😊点此到文末惊喜↩︎ 对象创建型模式 简单(静态)工厂模式 抽象原理 抽象产品基类 :定义了…...

Spark Catalyst 查询优化器原理

这里我们讲解一下SparkSQL的优化器系统Catalyst,Catalyst本质就是一个SQL查询的优化器,而且和 大多数当前的大数据SQL处理引擎设计基本相同(Impala、Presto、Hive(Calcite)等)。了解Catalyst的SQL优化流程&…...

贝叶斯分析法在市场调研中的应用

一、市场调研的需求场景 在营销活动的用研调研时,我们经常会去问用户在不同平台的品类付费情况,以对比大促期间本品和竞品分别在哪些品类上具有市场优势,他们之间的差距具体在哪里、差距有多大。假如根据调研问卷结果,我们知道拼多多用户有30%的人在大促购买生鲜类,而淘宝…...

JavaEE——MyBatis将查询结果集封装进POJO实体类

简单介绍 在之前的我们比较详细的介绍过MyBatis的配置信息的时候,在SQL映射文件中说过我们可以直接将结果集映射到我们的POJO实体类中,省去了我们自己处理查询结果集的时间和代码,接下来我们就来演示将单条数据和多条数据映射到我们POJO实体…...

C++11 包装器function

文章首发公众号:iDoitnow C提供了多个包装器,它们主要是为了给其他编程接口提供更一致或更合适的接口。C11提供了多个包装器,这里我们重点了解一下包装器function。 对于function, C 参考手册给出的定义为: 类模板 std::function…...

XCP实战系列介绍14-基于Vector_Davinci工具的XCP配置介绍(三)

本文框架 1.概述2. 其他模块配置2.1 XCP初始化3. 手工代码部分3.1 周期函数添加3.2 DAQ Event调用3.3 XCP模块本身代码3.4 标定量的添加1.概述 在对XCP的配置部分介绍中我们计划分别对通讯部分配置、XCP模块本身配置及其他相关模块配置三篇进行介绍,在前两篇我们介绍了XCP配置…...

计算机图形学:中点BH算法对任意斜率的直线扫描转换方法

作者:非妃是公主 专栏:《计算机图形学》 博客地址:https://blog.csdn.net/myf_666 个性签:顺境不惰,逆境不馁,以心制境,万事可成。——曾国藩 文章目录专栏推荐专栏系列文章序一、问题提出二、…...

(十一)、用户中心页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1,个人中心页面 1.1 新建个人中心页面 1.2 纯净版个人中心页面代码&#xff1a; <template><view class"user"><view class"top"><view class"group"><view class"userinfo"><!-- 顶部 左侧 头像 …...

LA@复数和复矩阵@实对称阵相关定理

文章目录复数&#x1f388;复矩阵和复向量共轭矩阵性质定理实对称阵的相关定理复数&#x1f388; 复数 (数学) (wikipedia.org) 加法&#xff1a;(abi)(cdi)(ac)(bd)i)减法&#xff1a;(abi)−(cdi)(a−c)(b−d)i)乘法&#xff1a;(abi)(cdi)acbciadibdi2(ac−bd)(bcad)i除法&…...

cmd set命令笔记

使用 set是cmd最基础的命令&#xff0c;每个人都会用&#xff0c;但其实它还是有些知识的。 set 用来接收入参 set /p var请选择&#xff08;1或2或3&#xff09;: echo %var%可以接收输入的参数。 set /p var请选择&#xff08;1或2或3&#xff09;: echo %var% 语法 he…...

IB学校获得IBO授权究竟有多难?

IB 学校认证之路&#xff0c;道阻且长 The road to IB school accreditation is long and difficult一所学校能获得IB授权必须经过IBO非常严格的审核&#xff0c;在办学使命&教育理念、组织架构、师资力量&授课技能、学校硬件设施和课程体系上完全符合标准才可获得授权…...

火山引擎 DataTester:A/B 测试,让企业摆脱广告投放“乱烧钱”

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 在广告投放的场景下&#xff0c;一线广告优化师通常会创建多个计划&#xff0c;去测试不同的广告素材效果。这套方法看似科学&#xff0c;实际上却存在诸多问题&…...

黑马redis学习记录:缓存

一、介绍 什么是缓存&#xff1f; 缓存(Cache)&#xff0c;就是数据交换的缓冲区&#xff0c;俗称的缓存就是缓冲区内的数据&#xff0c;一般从数据库中获取&#xff0c;存储于本地代码 缓存无处不在 为什么要使用缓存&#xff1f; 因为速度快,好用缓存数据存储于代码中,而…...

CD20靶向药物|适应症|市场销售-上市药品前景分析

CD20是靶向治疗的第一个靶点&#xff0c;是B细胞淋巴瘤的现代治疗药物。CD20作为治疗剂的使用被认为是方便的&#xff0c;原因有二。首先&#xff0c;在 CD20 阳性肿瘤的情况下&#xff0c;这种受体大量存在于 B 淋巴细胞表面——每个细胞大约有十万个分子。其次&#xff0c;干…...

多源 复制

使复制从属服务器能够同时从多个主服务器接收事务至少需要两个主服务器和一个从属服务器设备从属服务器为每个主服务器创建一个 复制通道从属服务器必须使用基于表的资料档案库多源复制与基于文件的资料档案库不兼容不尝试检测或解决冲突如果需要此功能&#xff0c;则由应用程序…...

微服务项目【消息推送(RabbitMQ)】

创建消费者 第1步&#xff1a;基于Spring Initialzr方式创建zmall-rabbitmq消费者模块 第2步&#xff1a;在公共模块中添加rabbitmq相关依赖 <!--rabbitmq--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo…...

vr电力刀闸事故应急演练实训系统开发

电力事故是在电力生产和输电过程中可能发生的意外事件&#xff0c;它们可能会对人们的生命财产安全造成严重的威胁。因此&#xff0c;电力事故应急演练显得尤为重要。而VR技术则可以为电力事故应急演练提供一种全新的解决方案。 在虚拟环境中&#xff0c;元宇宙VR会模拟各种触电…...

C++类和对象补充

目录 前言&#xff1a; 1. 构造函数->初始化列表 1.1 初始化列表出现原因 1.2 初始化列表写法 2. explicit关键字 2.1 explict的出现 2.2 explict的写法 3. static成员 4. 友元 4.1 友元函数 4.2 友元类 5. 内部类和匿名对象 5.1 内部类 5.2 匿名对象 前言&a…...

08 SpringCloud 微服务网关Gateway组件

网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f; 如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去用。 这样的架构&#xff0c;会存…...

极验3代 加密分析

目标链接 aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s接口分析 极验参数重要信息 gt和challenge&#xff1b;gt是固定的&#xff0c;但是challenge每次请求会产生不同的&#xff0c;这里的请求的并没有什么加密参数。 下一个请求 gettype.php&#xff0c…...

python 数据分析可视化实战 超全 附完整代码数据

代码数据&#xff1a;https://download.csdn.net/download/qq_38735017/873799141.1 数据预处理1.1.1 异常值检测①将支付时间转为标准时间的过程中发生错误&#xff0c;经排查错误数据为‘2017/2/29’,后将其修改为‘2017/2/27’。②经检测发现部分订单应付金额与实付金额都为…...

有趣的HTML实例(十三) 咖啡选择(css+js)

一个人追求目标的路途是孤单的&#xff0c;一个人独品辛酸的时候是寂寥的&#xff0c;一个人马不停蹄的追赶着&#xff0c;狂奔着&#xff0c;相信前方是一片光明&#xff0c;我从不放弃希望&#xff0c;就像我对生活的信念&#xff0c;没有人可以动摇。 ——《北京青年》 目录…...

费县做网站/百度引流推广

之前也没写过什么博客&#xff0c;可能文章结构比较混乱&#xff0c;想到那写到哪。主要是把自己学习中的经验写下来。为什么选择laravel框架&#xff0c;是因为laravel框架目前是Php最流行的框架&#xff0c;深入研究后发现和asp.net mvc框架在功能上基本上是伯仲之间。只是各…...

单页网站怎么做排名/今日新闻头条最新消息

经过我们服务的一些预期的增长后,所有突然的一些更新都花了很长时间,这些过去非常快,直到表达到大约2MM的记录,现在它们大约需要40-60秒.update table1 set field1field11 where id2229230;Query OK,0 rows affected (42.31 sec)Rows matched: 1 Changed: 0 Warnings: 0以下是字…...

自己编辑网站怎么做的/刷赞网站推广空间免费

魔术方法&#xff1a;PHP把类中所有以__&#xff08;两个下划线&#xff09;开头的方法当成魔术方法&#xff0c;一般建议用户不要将自定义的方法前面加上__作为前缀。魔术方法&#xff1a;1. __construct()类的默认构造方法&#xff0c;如果__construct()和与类同名的方法共同…...

做服务器的网站都有哪些功能/项目推广平台有哪些

触控科技CocoaChina2013秋季开发者大会今日在北京国家会议中心召开&#xff0c;触控科技CEO陈昊芝围绕“2013、2014、2015”为主题对中国手游行业的现在以及将来做了自己的分析与预测。 轻量级游戏是趋势 今年触控科技将重启大规模营销&#xff0c;近期成为“中国好声音”的标王…...

网站开发黄色片/重庆关键词自动排名

1.验证非法字符&#xff08;除了汉字、英文、数字、下划线、中划线、空格以外的&#xff09; var reg /^[\s\u4e00-\u9fa5a-z0-9_-]{0,}$/;if(!reg.test(this.userMsg)){console.log("包含非法字符")}else{console.log("不包含非法字符")} //封装写法 fun…...

个人网站要有什么/搜索引擎推广的关键词

与REV5.0相比&#xff0c;修改地方如下&#xff1a; 1. 为了与黑金开发板完全匹配&#xff0c;将硬件开发部分中并行flash的操作改为了EPCS控制器的操作&#xff1b; 2. 加入了LCD&#xff08;一&#xff09;&#xff0c;LCD(二)两章 文档中还有些地方还有不足之处&#xff0c;…...