当前位置: 首页 > Web前端 > HTML

FlutterForWeb

时间:2023-04-02 21:19:12 HTML

原文地址:https://medium.com/flutter/br...原作者:KevinMoore翻译作者:FedoraFlutterForWeb是一个跨平台的UI框架,用于构建漂亮的、定制化的应用程序Flutter现在是已经支持Web开发。我们很高兴推出SDK的预览版,它允许开发人员直接使用FlutterUI和业务逻辑代码来构建在浏览器中运行的Web应用程序。Flutter在Web上的野心自去年推出第一个公测版以来,开发人员已经使用Flutter构建跨IOS和Android的应用程序。但Flutter自始至终都被设计成一个跨平台的UI框架,包括Windows、Mac、Fuchsia甚至树莓派(RaspberryPi)。因为Flutter是用Dart编写的,并且包含一个用于构建原生代码和JavaScript代码的生产编译器,所以我们拥有坚实的基础。剩下的挑战是更换基于Skia的图形引擎和文本渲染以适应web平台。为此,我们需要提供:每秒60帧的快速、无抖动的页面交互考虑到Flutter的功能以及与其他平台上现有开发模型的可视化集成支持所有现代浏览器的高效开发体验Flutter的核心Web功能适用于尽管网络仍在进行中,但要实现上述功能还有很多工作要做。我们推出了预览版,开发人员可以试用并向我们提供反馈。FlutterWeb架构FlutterWeb端的整体架构与移动端类似:Flutter的核心层(上图中绿色部分)在移动端和Web端是相同的。它提供了FlutterUI的高级抽象,包括动画、手势、基本widget以及大多数应用程序需要的一组Material风格widget。如果您已经使用Flutter进行客户端开发,那么您将可以快速启动并运行Web开发。神奇之处在于将这些概念(在客户端)转换为浏览器。我们重新实现了dartui库,原来是基于Skia引擎在客户端使用,现在基于DOM和CanvasAPI。当你将Flutter代码编译到Web端时,你的应用程序包含了Flutter核心库,Web端的dartui库,所有用Dart语言编写的代码都会被编译成JavaScript代码,可以在所有现代浏览器中运行.我们正在认真考虑采用web核心的特性,例如使用Flutter的路由模型来无缝连接浏览器的History路由。我们也在和Flutter桌面端合作,实现客户端开发中没有用到的鼠标滚动、悬停、聚焦等功能。FlutterWeb项目焦点的核心功能是框架提供的丰富流畅的交互体验。基于文档的Web端也可以受益于FlutterWeb可视化。此预览版核心存储库是现有Flutter核心存储库的临时分支。这使得我们的工程师可以快速实现Web端功能,而核心团队可以继续为生产环境开发稳定的工具。我们已经开始将部分浏览器支持代码合并到主存储库中。我们计划提供一个Flutter工具包,里面的核心框架会提供对移动、Web等平台的支持。我们计划的工作包括:支持选择、复制和粘贴等文本功能。提供插件支持。像位置信息、摄像头、文件API,我们希望提供一个简单的API来桥接客户端和web。为PWA提供开箱即用的技术支持。将Web开发所需的工具集成到现有的FLutter脚手架和编辑器中。能够使用DevTools调试Web开发。能够提高性能、浏览器支持和可访问性欢迎访问flutter.dev/web以获取示例、文档和更多资源。我们期待您使用Flutter构建的Web应用程序。