Flutter Web 开发实践与优化
2023-09-27 14:22:49 时间
一,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 版本的分层架构图如下所示。
与其他运行 Flutter 的平台相比,
相关文章
- flutter DateTime 日期时间详细解析 Dart语言基础
- Flutter SliverAnimatedOpacity 透明渐变动画效果
- Flutter TextField 设置默认值和光标位置
- flutter网络dio框架公共请求参数、请求header使用总结
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter精品项目之AI 驱动的 Flutter 应用程序,可以生成随机人物的面孔(项目含源码)
- 如何使用 Flutter Web 构建 Chrome 扩展(教程含源码)
- Flutter实战-flutter混合开发报错:Failed to apply plugin [class ‘FlutterPlugin‘]
- flutter系列之:按比例缩放的AspectRatio和FractionallySizedBox
- 检查 Flutter 应用程序是否在 Web 上运行
- Flutter 完美的验证码输入框(2 种方法)
- 如何在 Flutter 和 Dart 中检查数字字符串
- 如何在Flutter(2021)中创建过滤器搜索列表视图
- Flutter 调用地图软件(高德、百度、腾讯、苹果)同时实现另类国际化
- Flutter Doctor:Xcode 安装不完整
- Flutter开发 - 写一个漂亮的导航栏
- Flutter - Mac上使用VSCode开发Flutter