超详细,Flutter2.0构建Web应用的实际体验|技术点评

简介: 接触Flutter开发的时间并不长,最早关注到Flutter,就是听说它可以跨端开发iOS,Android,Web端。直到上周看了Flutter2.0的发布,才知道,原来跨web端才刚刚stable呀...那我们来真实的体验一下,Flutter发布web应用究竟靠不靠谱?

开启web端构建


使用下面这个命令才可以开启Web端构建的支持


flutter config --enable-web


开启后我们再次输入flutter config可以看到


image.png


创建新项目


这样每次新建Flutter项目时,都是支持web端构建的,会默认多出一个构建配置目录web


image.png


即使某个项目不需要支持web端构建也无须去特意关掉这个支持,不使用构建web的命令即可


旧项目开启web支持


其实就是对当前项目重新配置一下


flutter create .


调试web端


在没有其他端环境可用的情况下,使用以下命令会直接编译web端并打开chrome进行调试


flutter run


image.png


编译发行Web端


Flutter在构建web端应用时,可以选择两种渲染模式。下面给大家演示下,大家注意仔细看看截图中我标记了红框的部分。


HTML渲染模式


flutter build web --web-renderer html


image.png


当我们采用html渲染模式时,flutter会采用HTML的custom element,CSS,Canvas和SVG来渲染UI元素


image.png


优点:


  • 应用体积更小


缺点:


  • 渲染性能差
  • 跨端一致性可能受影响


CanvasKit渲染模式


flutter build web --web-renderer canvaskit


image.png


当我们采用canvaskit渲染模式时,flutter将 Skia 编译成 WebAssembly 格式,并使用 WebGL 渲染。应用在移动和桌面端保持一致,有更好的性能,以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。


image.png


优点:


  • 像素级跨端一致性
  • 更好的渲染性能


缺点:


  • 应用体积变大,需要加载一个2.5MB的webaseembly格式的代码


还有一个auto的渲染模式(默认),会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式


结论


随着Flutter2.0的发布,这个带着【全平台像素级跨端一致性的】框架会更加倍受关注。


虽然Web端的编译结果无论哪种渲染方式暂时在国内的web体验标准下都还差点意思,但是真的很值得期待。


目录
打赏
0
0
0
0
4
分享
相关文章
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
62 19
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
174 17
使用Web浏览器访问UE应用的最佳实践
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
97 2
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
120 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
89 6
构建互联网高性能WEB系统经验总结
如何构建一个优秀的高性能、高可靠的应用系统对每一个开发者至关重要
50 2

热门文章

最新文章