超详细,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体验标准下都还差点意思,但是真的很值得期待。


相关文章
|
7天前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
使用Web浏览器访问UE应用的最佳实践
|
29天前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
30天前
|
存储 容器
Flutter 构建自适应布局
Flutter 构建自适应布局
Flutter 构建自适应布局
|
1月前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
72 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
29天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
54 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
49 5
|
2月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
65 4
|
29天前
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
|
2月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
41 4