flutter和webapp_Flutter Web Beta版本终于发布了

在昨天的Flutter Interact大会中，谷歌Flutter团队给我们带来了最新的Flutter 1.12版本，在此次版本更新中，其中一个吸引人的功能就是“Flutter Web Beta”版本发布了。也就是说可以用它开发实际项目了。

一、有了FlutterNative，为什么还要用Flutter Web？

因为开发人员构建的应用程序需要同时在移动设备和Web上运行，并且能够完美地运行起来。作为开发人员，需要学习一组可以轻松跨多个平台迁移的技能是非常有必要的。Flutter支持Web，意味着开发人员可以使用相同的代码，更快地发布功能，并确保其跨设备(Android、iOS、Web)体验的一致性。此外，功能强大的Dart编译器针对Web专门做了优化升级，然后Flutter架构是可移植的，这些就让开发者使用Flutter能够轻易的创建出具有非常良好的性能的，交互式强的，多端一致性的Web体验的程序。

我们看看Flutter Web的兼容性，简直是太酷了！不管是手机、平板还是浏览器都能得到很好的兼容，完美！

二、Flutter Web支持的方案

Flutter团队给出的适合Flutter Web特征的场景有以下这些：

1.联网的独立应用程序

Flutter可使开发人员在移动端和浏览器中使用相同的代码构建单个应用程序。这是Flutter Web的一个最初期开始就制定的一个方案，也是用的最广泛的一种跨平台方案。这样一来充分你用了Flutter的跨平台的能力，真正做到了一次代码，三端运行，并且具有一致性和高性能的特点，维护起来也很方便。(希望不要被那些黑心的老板或者喜欢压榨的技术管理看到，要不然程序员又要苦逼了。。。一个人干3个人的活。。就问你爽不爽？)

2.嵌入式互动内容

一种情况是在父站点中嵌入功能丰富的，以数据为中心的mini应用程序，并且无需导航服务或其他类似应用的功能。比如：你可以嵌入一个数字游戏，在线聊天机器人，房贷计算器，天气预报等。

3.精简版应用

精简版Web应用程序可以使用Flutter相同的工具，框架，UI组件和业务逻辑来提供较少的功能丰富的体验以及相关功能。然后就可以减少部分开发者因为安装问题出现的难题而错过了Flutter的使用。现有的Flutter应用程序具有轻量级的Web体验，可为公司带来两全其美的体验。

4.伴侣应用

Flutter Web是辅助，移动端应用程序是主体，使用Flutter构建的网络体验，然后用于支持你的移动应用程序。比如使用Flutter构建一个Web应用程序，使管理员或内部用户可以为现有的Flutter移动应用程序创建内容或管理后端。尽管有点麻烦，但是Flutter Web这一部分可以利用移动应用程序中的许多相同代码。

三、丰富的Web插件支持

pub.dev也做了更新升级，新增平台标记和过滤。

在搜索页面做了优化，列出了软件包支持Dart还是Flutter，点击Dart进去，就会看到右侧有两个细分类：Native、JS；点击Flutter进去，就会看到右侧有三个细分类：Android、iOS、Web。如果点击Any就会显示所有的插件库。

然后，在软件包详细信息页面上，列出了软件包支持的平台，如果是纯Dart包，就会显示这三个中的某些： Native、JS；如果支持Flutter，会显示这三个中的某些：Android、iOS、Web。当然具体支持哪些要看每一个包的功能了。有Web标记的一定是支持Web的，这样可以轻松确定软件包是否具有Web支持。

Flutter团队针对Web对一些包进行了升级，Flutter团队已经帮我们把Flutter和JS相互调用的功能封装好了，直接调用这些包里面的API就可以了，这些包可以在Flutter和Flutter Web上同时运行，所以不必担心兼容性问题，开发起来还是很快捷方便的。包括以下这些：

shared_preferences Flutter插件，用于读写简单的键值对。

firebase_core 可连接到多个Firebase应用程序

firebase_auth 用于Firebase身份验证的Flutter插件

google_sign_in 谷歌登录

url_launcher 路由导航

video_player 视频播放

sentry Dart的崩溃报告库

【PS】：我在3个月前Flutter1.9版本刚出来时的Flutter Web体验时，

就对url_launcher不支持Web功能给Flutter提了一个issues，没想到

这么快就实现了，不得不佩服谷歌Flutter团队的办事效率。

当然目前来看Flutter Web插件还不够多，也希望各位大佬都踊跃参加，积极贡献自己写的插件，让Flutter Web更完善。

四、待处理问题

1.辅助功能

目前已为跨平台的辅助技术实现的一些功能包括诸如UI遍历和遍历顺序，UI交互提示(如可轻击，文本标签，可编辑的文本，增量，图片，活动区域和单选框)之类的功能。 桌面Web浏览器添加屏幕阅读器的支持功能正在研发中。

2.多浏览器支持

随着Flutter从仅移动的框架发展到涵盖桌面UX习惯用法，Flutter对桌面Web浏览器的支持将得到改善，并变得更加无缝。Flutter Web团队计划在桌面Web浏览器和移动浏览器上支持和测试Chrome，Edge，Firefox和Safari。

3.测试范围

Flutter Web的发布以来，Flutter Web团队在框架和Flutter Web引擎上的测试范围在逐渐增加。Flutter Web团队已经在Chrome上运行自动化测试，并手动测试Safari。未来还有更多的测试工作要做。

本文首发在公众号【Flutter那些事】，更多干货欢迎关注。

最后给大家送上最新的福利，小伙伴们赶紧来看看吧：Flutter入门+进阶实战80讲 - 卢召韦 - CSDN学院 - 在线视频教程​edu.csdn.net