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


相关文章
|
安全 Go 区块链
crypto
【10月更文挑战第29天】crypto
774 1
|
存储
【技术贴】小米otg线连接U盘文件管理器找不到U盘内容的解决办法
文件管理--点击中间 【sd 卡】,然后下面0.5cm位置左上方会有个 【sd卡】这几个字,你用手点一下,然后会弹出选择磁盘。。就能看到U盘啦!!截图如下。 不支持热插拔,一定要在设置--存储--卸载你的U盘。
2654 0
|
存储 关系型数据库 MySQL
百度搜索:蓝易云【Centos8 stream系统编译安装MySQL5.7教程。】
以上是在CentOS 8 Stream系统上编译安装MySQL 5.7的基本教程。请注意,具体的配置和参数可能因您的需求而有所不同,您可以根据自己的情况进行调整。同时,请确保在执行任何操作之前备份重要的文件和数据。
783 0
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
网络协议
IDEA启动报端口占用
IDEA启动报端口占用
|
前端开发 JavaScript API
JS 中这些冷门但好用的 API,你知道多少?
JS 中这些冷门但好用的 API,你知道多少?
412 0
|
小程序
微信小程序setData如何动态修改数组?
微信小程序setData如何动态修改数组?
|
10月前
|
Web App开发 缓存 监控
阿里云渠道商:如何优化阿里云 CDN 配额的使用效率?
CDN可提升网站速度,但30%企业因配置不当致带宽超支。本文分享阿里云验证的三大优化方案:精细化缓存、智能压缩与数据驱动配额调配,最高节省40%带宽成本。附实操步骤,助你高效降本。
|
JavaScript
NGROK——Invalid Host header
NGROK——Invalid Host header
462 0
|
测试技术 开发工具 文件存储
Git Stash
【8月更文挑战第27天】
979 6

热门文章

最新文章