Flutter支持Web开发了!

时间: 2019-05-14阅读: 1552标签: Flutter

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


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平台中共享,它提供了Flutter的UI基础层的高层次抽象,包括动画、收拾、基础组件类、以及大多数应用需要的物化主题的组件集。如果你已经在Flutter上开发,那么使用Flutter Web时你会感到非常熟悉。

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


我们仔细地拥抱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查看示例、文档以及其他资源的链接,我们期待着看到你的创作!


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

 

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3315

在 Flutter 中玩转 Objective-C Block

dart_native 作为一条比 Channel 性能更高开发成本更低的超级通道,通过 C++ 调用 Native 的 API,深入底层且考虑全面。很多 Objective-C 接口的参数和返回值是 Block,所以这就需要支持用 Dart 语言创建和调用 Objective-C Block。

Flutter 国际化应用实战

借助App Store与Google Play,全世界任何一个国家的使用者都可以使用我们开发的应用,不过由于应用的使用者来自不同国家,所以在应用正式上架之前需要让应用能够支持多种语言,即应用的国际化。在Flutter开发中

Flutter 实现整个App变为灰色

在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下:

在Flutter中使用Android、iOS的原生 View

我们在进行Flutter开发的时候,有时候是需要用到原生的View,比如WebView、MapView、第三方广告SDK等,Flutter提供了AndroidView、UiKitView可以实现相关功能。

Flutter事件监听

在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击、手指滑动、双击、长按等等。在Flutter中,手势有两个不同的层次:

深入Flutter

本文主要说了Flutter内部使用了怎样的算法和优化让Flutter如此强大。某些内容对比了Flutter和其他开发工具一致性算法的优劣,不过个人感觉还是太过简短,后面我会花更多的时间来研究这方面的内容,后续补上

Flutter 同步系统的 HTTP 代理设置

一般的,在 Flutter APP 里请求 HTTP 使用的是官方提供的 http 包。但是,有一个问题,在 Android 或者 iOS 上运行 Flutter APP,系统里配置的 HTTP 代理并不生效?

可能是Flutter上最简单的本地数据保存方案

local_cache_sync是一个非常简单易用的Flutter本地储存库,适用于在本地储存一列轻量数据(例如用户保存在本地的设备信息,或者缓存一系列用户信息),local_cache_sync的所有方法,包括保存与读取,都是同步的,而不是异步的。

Flutter 添加到现有项目

最近一直在看Flutter 的内容, 加上近期更新的Flutter1.12 有一些Flutter 的api 发生了改变, 所以 某些和android 交互的地方 就发生了变化,比如开始使用的新的插件api 旧的 PluginRegistry.Registrar

Flutter使用JsBridge方式处理Webview与H5通信

目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段。作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广