Flutter Web 开发实践与优化

news2024/11/14 11:36:19

一,Flutter Web架构

目前,除了可以支持Android、iOS移动跨平台开发之外,Flutter还支持macOS、Windows、Linux和Web等多个跨平台的开发。可以说,作为一款先进的跨平台开发框架,Flutter已经真正意义上实现了“一次编写,处处运行”的美好愿景。

众所周知,Dart 语言存在之初就已经支持直接编译成JavaScript,并且针对开发和生产环境的工具链进行了优化。许多重要的应用已经使用 Dart 编译成的 JavaScript 在生产环境上运行,包括 Google Ads 的广告商工具 。由于Flutter 框架是 Dart 编写的,所以将其编译成 JavaScript 相对而言更为简单。

然而,使用C++编写的Flutter引擎是为了与底层操作系统进行交互的,而不是 Web 浏览器。因此我们需要另辟蹊径。Flutter 在 Web 平台上以浏览器的标准 API 重新实现了引擎。 目前我们有两种在 Web 上呈现内容的选项:HTML 和 WebGL。在 HTML 模式下,Flutter 使用 HTML、CSS、Canvas 和 SVG 进行渲染。而在 WebGL 模式下,Flutter 使用了一个编译为 WebAssembly 的 Skia 版本,名为 CanvasKit 。HTML 模式提供了最佳的代码大小,CanvasKit 则提供了浏览器图形堆栈渲染的最快途径,并为原生平台的内容 5 提供了更高的图形保真度。Flutter Web 版本的分层架构图如下所示。

image.png

与其他运行 Flutter 的平台相比,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/411056.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【建议收藏】数据库 SQL 入门——事务(内附演示)

文章目录📚引言📖事务📑事务的概念📑事务操作🔖查看与设置事务提交方式🔖提交事务与回滚事务📑事务的特性📑并发事务问题📑事务隔离级别📍总结📚引…

8.基于拉丁超立方法的风光场景生成与削减

matlab代码:基于拉丁超立方法的风光场景生成与削减 摘要:与蒙特卡洛法不同,拉丁超立方采样改进了采样策略能够做到较小采样规模中获得较高的采样精度,属于分层抽样技术,设定风光出力遵从正态分布normrnd,从…

字节面试体验值拉满~

今天分享一位读者春招的字节二面面经,岗位是后端开发。 一个编程语言都没问,都是问网络项目mysqlredis。 问题记录 使用消息中间件降低消息持久化的压力是怎么做的,为什么可以降低? 读者答:在突发大量消息的情况下…

水塘抽样解决随机选择问题

1.简介 水塘抽样是一系列的随机算法,其目的在于从包含n个项目的集合S中选取k个样本,其中n为一很大或未知的数量,尤其适用于不能把所有n个项目都存放到内存的情况。最常见例子为Jeffrey Vitter在其论文中所提及的算法R。 2.算法步骤&#xff1…

AD823AARZ-RL-ASEMI代理亚德诺AD823AARZ-RL车规级芯片

编辑-Z AD823AARZ-RL芯片参数: 型号:AD823AARZ-RL −3dB带宽:17 MHz 全功率响应:4.8 MHz 斜率:30 V/s 输入电压噪声:14 nV/√Hz 输入电流噪声:1 fA/√Hz 初始偏移量:0.12mV …

nacos集群配置高可用数据库

1.架构 nacos集群配置高可用数据库的架构其实和nacos集群的架构差不多,只是在数据库方面做了主从跟keepalive实现数据库的高可用,当mysql的master节点挂掉时,keepalive的vip自动漂移到slave节点,并通过脚本使slave节点提升为mast…

Leetcode.1992 找到所有的农场组

题目链接 Leetcode.1992 找到所有的农场组 Rating : 1539 题目描述 给你一个下标从 0 开始,大小为 m x n 的二进制矩阵 land ,其中 0 表示一单位的森林土地,1 表示一单位的农场土地。 为了让农场保持有序,农场土地之…

QT程序退出还占进程

问题情况 程序运行时的样子: 程序退出时的样子: 其跑到了后台进程里面: 程序退出了,但在任务管理器里查看,其从进程里面转移到后台进程了。 这种问题,怎么办,代码里,应该释放的也都…

微信小程序引入广告位功能,详细步骤!!!

大家碰到过首页加载时一开始出现的广告页面,这种微信官方提供了一个api进行设置,下面我们来详细解释一下。 首先第一步需要小程序累计用户数达到1000即可开通流量主,成功开通流量主之后就可以创建相应的广告位了,包括banner广告、…

【设计模式】如何在业务开发中使用适配器模式?

文章目录前言适配器模式定义通用代码实现适用场景案例场景分析一坨坨代码实现适配器模式重构总结前言 适配器模式(Adapter Pattern):将一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个…

Can‘‘t connect to MySQL server on localhost (10061)解决方法

首先检查MySQL 服务没有启动》如果没有启动,则要启动这个服务。 有时候安装mysql后使用mysql命令时报错 Cant connect to MySQL server on localhost (10061),或者用net start mysql 时报服务名无效,一般是因为mysql服务没有启动。 打开 powe…

itop-3568开发板驱动学习笔记(18)tasklet 机制

《【北京迅为】itop-3568开发板驱动开发指南.pdf》 学习笔记 文章目录tasklet 简介tasklet 结构体tasklet 初始化使能 tasklet失能 tasklettasklet 调度函数tasklet 取消调度函数tasklet 实验tasklet 简介 Tasklets 机制是linux中断处理机制中的软中断延迟机制。在linux中存在着…

【ES】搜索结果处理RestClient查询文档

【ES】搜索结果处理&RestClient查询文档2.搜索结果处理2.1.排序2.1.1.普通字段排序2.1.2.地理坐标排序2.2.分页2.2.1.基本的分页2.2.2.深度分页问题2.2.3.小结2.3.高亮2.3.1.高亮原理2.3.2.实现高亮2.4.总结3.RestClient查询文档3.1.快速入门3.1.1.发起查询请求3.1.2.解析响…

【计算机图形学】图形变换(平移变换、比例变换、旋转变换、对称变换、错切变换、复合变换)

一 实验目的 编写图形各种变换的算法二 实验内容 1:自行设计基本图案,完成1-5种简单变换 实验结果如下图所示: 图形初始化: 第一次点击左键,实现平移变换: 第二次点击左键,实现比例变换&…

Android 性能优化——APP启动优化详解

1.1 为什么要启动优化? 用户希望应用能够及时响应并快速加载,启动时间过长的应用不能满足这个期望,并且可能使用户失望。 启动太慢的结果: 体验效果差用户放弃使用你的应用时间越长用户流失越高产品死掉 1.2 启动优化流程及分…

HDLBits-Modules 题解【Verilog模块例化】(中文翻译+英文原文,可顺带学习英文)

Moudule 概念介绍 到目前为止,你已经熟悉了一个模块,它是一个通过输入和输出端口与其外部交互的电路。更大、更复杂的电路是通过将较小的模块和其他连接在一起的部分(例如赋值语句和always块)组合而成的更大模块来构建的。因为模…

从零开始学OpenCV——图像灰度变换详解(线性与非线性变换)

文章目录图像灰度变化灰度变换介绍灰度线性变换灰度分段线性变换图像点运算灰度非线性变换线性点运算灰度的非线性变换:对数变换灰度的非线性变换:伽马变换灰度的非线性变换:对比拉伸灰度的非线性变换: S形灰度变换灰度的非线性变…

tomcat中出现RFC7230和RFC3986问题解析

问题截图 问题分析 出现上述问题,是因为各版本tomcat中对特殊字符和请求路径中携带中文参数而产生的错误提示。 解决办法 1、调整tomcat版本 tomcat 7.0.76之前的版本不会出现类似问题 2、tomcat9之前,修改tomcat目录底下的/conf/catalina.properti…

233:vue+openlayers绘制渐变填充色的圆形、多边形

第233个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayer中绘制带有渐变填充色的圆形、多边形。这里用canvas的方式去渲染,用到了DEVICE_PIXEL_RATIO,设备上的物理像素与设备无关像素 (dips) 之间的比率 (window.devicePixelRatio)。 直接复制下面的 vue+openlayer…

用ChatGPT创建一个REST API

ChatGPT是OpenAI公司开发的大型语言模型。在本文中,主要探讨如何使用ChatGPT在C#中创建REST API。 一、简介 ChatGPT是由人工智能研究中心OpenAI创建的尖端自然语言处理模型,OpenAI公司是由埃隆马斯克、萨姆奥特曼和格雷格布罗克曼共同创办的。该模型于…