原文地址: https://medium.com/flutter/br... 原文作者: Kevin Moore 翻译作者: Fedora Flutter For Web 用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出" />
  • 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

Flutter For Web

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4340.html 1190000019640377">
原文地址: https://medium.com/flutter/br...

原文作者: Kevin Moore

翻译作者: Fedora

Flutter For Web

用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出了一个预览版的 SDK 可以让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用在浏览器中运行起来。

Flutter 在 Web端的雄心

自从去年第一个公测版本推出之后,开发者使用 Flutter 构建跨 IOS 和 Android 的应用。但是 Flutter 自始至终被设计成一个跨平台的 UI 框架包括 Windows ,Mac,Fuchsia 甚至是 Raspberry Pi(树莓派)。因为 Flutter 是由 Dart 编写的,里面包含一个生产环境的编译器来构建原生的代码和 JavaScript 代码,所以我们有一个坚实的基础。剩下的挑战就是替换基于 Skia-based 的图形引擎和文本渲染来适配 Web 平台。

要做到这些,我们需要提供:

  • 快速,无抖动的且每秒60帧的页面交互
  • 考虑到 Flutter 在其他平台提供的能力和视觉
  • 和现有开发模式整合的高效率的开发体验
  • 支持所有现代浏览器的核心 Web 功能

虽然Flutter for web是一项正在进行中的工作,而且为了实现上述功能还有很多工作要做。我们已经推出一个预览版,所以开发者可以进行尝鲜并给我们反馈。

Flutter Web 架构

Flutter 在 Web 端的整体架构和移动端的架构差不多:

Flutter架构

Flutter 核心层(上图绿色部分)在移动端和 Web 端是一样的。它提供了 Flutter UI 的高度抽象,包括动画,手势,基本的小部件,以及一套大部分应用需要的 Material 风格的部件。如果你已经在客户端开发中使用了 Flutter,那么你就会很快的在 Web 开发中上手。

神奇之处就是将这些概念(客户端层面的)编译到浏览器中。我们重新实现了 dart ui 库,原本是基于 Skia 引擎被用在客户端上,现在是基于 DOM 和 Canvas API。当你编译 Flutter 代码到 Web 端,你的应用包括 Flutter 核心库,Web 端的 dart ui 库,所有的用 Dart 语言写的代码都会被编译成 JavaScript 代码,能够运行在所有的现代化浏览器中。

三端平台预览图

我们正在认真考虑采纳 Web 核心的特性,像用 Flutter 的路由模型无缝衔接浏览器的 History 路由。我们还在与 Flutter 桌面终端 合作,来实现鼠标滚动,悬停和聚焦这些客户端开发中用不到的功能。

Flutter Web 项目聚焦的核心功能就是框架提供的丰富流畅的交互体验。基于 document 的 Web 端也能从 Flutter web 可视化中 收益。

这个预览版的核心库是现有 Flutter 核心库的一个临时分支。这让我们的工程师能够很快的实现 web 端功能而核心团队能够持续保持开发稳定的用于生产环境的工具。我们已经开始往主仓库合并部分支持浏览器端的代码。我们计划提供一个 Flutter 的工具包,里面的核心框架将为移动端,web,和其他平台提供支持。

我们计划的工作包括:

  • 支持文本特性例如选中,复制和粘贴。
  • 提供插件支持。像位置信息,摄像头,文件 API,我们希望提供一个简单的 API 将客户端和 web 端桥接起来。
  • 对 PWA 提供开箱即用的技术支持。
  • 将 web 开发所需要的工具集成到现有的 FLutter 脚手架和编辑器中。
  • 能够用 DevTools 来调试 web 开发。
  • 提高性能,浏览器支持以及无障碍的访问的能力

欢迎大家去 flutter.dev/web 查看例子,文档以及更多的资源。我们很期待你使用 Flutter 开发的 web 应用。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!