目标全平台的Flutter支持Web应用开发了!

简介: Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。原文链接:Flutter Web - 目标全平台开发的Flutter再下一城!- 汇智网Flutter Web的目标从去年Beta版发布以来,客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

原文链接:Flutter Web - 目标全平台开发的Flutter再下一城!- 汇智网

Flutter Web的目标

从去年Beta版发布以来,客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。但是,Flutter是以可移植的UI工具集构架的,它还可以运行在其他环境下,例如Windows、Mac、Fuchsia甚至Raspberry Pi。 由于Flutter是使用Dart构建的,它针对原生机器码和JavaScript都包含了生产级的编译器,因此我们有了一个坚实的基础。接下来的挑战在于需要使用web平台的对等单元来替换基于Skia的图形引擎和文本渲染器。

要正确地实现这一点,我们需要提供:

  • 60帧/秒快速平滑动画的性能
  • 与其他平台一致的行为和视觉感受
  • 可以与当前开发模式集成的高效的开发者工具
  • 在所有现代浏览器上对核心web特性的支持

虽然用于Web的Flutter还在开发中,在上述几个方面都还有很多工作要进行,不过我们已经可以和大家分享一个预览版了,你可以尝试以下,期待你的反馈!

Flutter Web总体架构

Flutter Web的总体架构与用于移动平台的Flutter非常接近:

flutter web architecture

Flutter框架(上图中绿色部分)在移动和web平台中共享,它提供了Flutter的UI基础层的高层次抽象,包括动画、收拾、基础组件类、以及大多数应用需要的物化主题的组件集。如果你已经在Flutter上开发,那么使用Flutter Web时你会感到非常熟悉。

魔力来自于将这些概念翻译到浏览器平台。我们重新实现了dart:ui库,使用基于DOM和Canvas的代码替换了移动平台上对Skia引擎的绑定。当你为Web平台编译Flutter代码时,你的应用、Flutter框架、以及Web版本的dart:ui库都将编译为JavaScript,可以运行在任何现代浏览器上。

flutter web architecture

我们仔细地拥抱web核心特性,例如将Flutter的路由模型与浏览器History无缝集成。我们同时也努力让Flutter适应桌面环境,例如启用鼠标滚动、悬停、聚焦等等,虽然这些特性在移动体验中并不需要。

Flutter Web项目聚焦于框架提供的核心价值:丰富的交互式体验。而聚焦于文档的Web内容依然可以通过嵌入Flutter Web可视化元素来获益。

预览版本的Flutter Web框架当前是作为已有Flutter框架的一个临时分支。这使得我们的工程师可以快速实现Web功能,同时核心团队可以继续维护并改进生产可用的工具集。我们一进刚开始将浏览器支持合并到主仓库。我们计划提供一个Flutter工具集,提供一个单一的框架来满足移动、Web以及其他平台的开发需要。

接下来计划的工作包括:

  • 支持文本相关的特性,例如选中、复制、粘贴
  • 支持插件。对于像位置、摄像头、文件访问这些特性,我们希望使用单一API来桥接移动平台和Web
  • 为PWA这样的科技提供开箱即用的支持
  • 使用已有的Flutter命令行和IDE集成工具来统一web开发工具链
  • 使用DevTools调试web应用
  • 性能的改善、浏览器的支持,以及可访问性

你可以到flutter.dev/web查看示例、文档以及其他资源的链接,我们期待着看到你的创作!

目录
相关文章
|
11天前
|
数据库 开发者 Python
web应用开发
【9月更文挑战第1天】web应用开发
26 1
|
2天前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
17 6
|
7天前
|
数据采集 Java 数据挖掘
Java IO异常处理:在Web爬虫开发中的实践
Java IO异常处理:在Web爬虫开发中的实践
|
9天前
|
前端开发 JavaScript 持续交付
Web应用开发的方法
Web应用开发的方法
11 1
|
9天前
|
前端开发 JavaScript 持续交付
web应用开发
web应用开发
17 1
|
11天前
|
Web App开发 数据采集 iOS开发
「Python+Dash快速web应用开发」
这是「Python+Dash快速web应用开发」系列教程的第十六期,本期将介绍如何在Dash应用中实现多页面路由功能。通过使用`Location()`组件监听URL变化,并结合回调函数动态渲染不同页面内容,使应用更加模块化和易用。教程包括基础用法、页面重定向及无缝跳转等技巧,并通过实例演示如何构建个人博客网站。
22 2
WK
|
8天前
|
数据采集 API 开发者
很少有人用python开发web???
Python 是一种流行且广泛使用的编程语言,尤其在 Web 开发领域。它凭借简洁的语法、丰富的框架(如 Django 和 Flask)、强大的库支持及活跃的社区,成为许多开发者和企业的首选。Python 的易学性、高效性及广泛的应用场景(包括 Web API、微服务和数据分析等)使其在 Web 开发中占据重要地位,并将持续发挥更大作用。
WK
28 0
|
11天前
|
数据库 开发者 Java
数据战争:Hibernate的乐观与悲观锁之争,谁将主宰并发控制的王座?
【8月更文挑战第31天】在软件开发中,数据一致性至关重要,尤其是在多用户并发访问环境下。Hibernate 作为 Java 社区常用的 ORM 框架,提供了乐观锁和悲观锁机制来处理并发问题。乐观锁假设数据不易冲突,通过版本号字段 (`@Version`) 实现;悲观锁则假定数据易冲突,在读取时即加锁。选择哪种锁取决于具体场景:乐观锁适合读多写少的情况,减少锁开销;悲观锁适合写操作频繁的场景,避免数据冲突。正确应用这些机制可提升应用程序的健壮性和效率。
22 0
|
11天前
|
Java 测试技术 容器
从零到英雄:Struts 2 最佳实践——你的Web应用开发超级变身指南!
【8月更文挑战第31天】《Struts 2 最佳实践:从设计到部署的全流程指南》深入介绍如何利用 Struts 2 框架从项目设计到部署的全流程。从初始化配置到采用 MVC 设计模式,再到性能优化与测试,本书详细讲解了如何构建高效、稳定的 Web 应用。通过最佳实践和代码示例,帮助读者掌握 Struts 2 的核心功能,并确保应用的安全性和可维护性。无论是在项目初期还是后期运维,本书都是不可或缺的参考指南。
21 0
|
11天前
|
前端开发 开发者 安全
JSF面向对象设计,让你轻松应对复杂业务需求,Web应用开发不再难!
【8月更文挑战第31天】在现代Web应用开发中,JSF(JavaServer Faces)框架凭借其强大的面向对象编程能力广泛应用于数据绑定和事件处理。数据绑定机制使前端与后端模型解耦,提高代码维护性和类型安全性;事件处理机制则增强了应用灵活性并进一步降低耦合度。本文通过示例代码展示了JSF的这些特性及其优势,帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而,JSF也存在组件库较小和学习成本较高的局限,需根据具体需求权衡使用。
22 0