Flutter For Web 已经发布一年多时间，他的发布意味着我们可以真正地使用一套代码、一套资源部署大前端。在这里希望和大家分享下实践过程和踩坑实例，欢迎一起交流探讨。

01 Flutter For Web简介

什么是Flutter

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。
Flutter重写一套跨平台的UI框架，引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性。

其他跨平台解决方案 Flutter

Flutter For Web

Flutter For Web想在单代码库的情况下，使Flutter应用拥有Web支持。
Flutter应用可以被部署到任意的Web服务器上，或嵌入到浏览器中，而不需要特殊的浏览器插件支持。

Flutter for Web架构 Flutter for Mobile架构 Flutter For Web的绘制

开发过程

1.配置开发环境

$ flutter channel beta 
$ flutter upgrade 
$ flutter config --enable-web

2.创建应用

$ flutter create myapp
$ cd myapp

3.编译

$ flutter build web

4. 老项目增加对flutter web的支持

$ flutter create .

代码结构

代码结构：

lib
写 dart 代码的主要区域

web
web工程的主目录了，包含 index.html 文件。但是如果你需要有资源文件、js 文件等 web 所需资源，也可以放到这个文件夹。

main.dart.js
dart文件转化为js，会在编译后的build文件夹中看到

Flutter For Web 工程目录结构

编译后的产物：

assets 资源相关文件
index.html web工程的入口
main.dart.js dart代码编译后的文件

编译后的产物

开发中存在的问题

库

Dart库的平台差异

1. 有部分库在Flutter web中不支持
   如：dart.io无法在web中使用，dart.io支持非web应用程序的文件、套接字、HTTP 和其他 I/O 操作。

2. 有部分库只支持Flutter web中使用
   dart:html html 相关的操作，如 document、ua、cookie 等等

   dart:js dart 和 JS 进行交互，可以给 js 方法传参，甚至还可以将 js 的参数带回等等

3.解决方案--条件引用

   import ‘httpReuqest-stub.dart’
        if (dart.library.io)   ‘httpReuqest-mobile.dart’
        if (dart.library.html)  'httpReuqest-web.dart’;

与客户端开发的区别

支持Flutter web的第三方库相对较少

只支持iOS和Android的第三方库

Flutter web中的Cookie管理

Flutter web中的cookie实际上是由浏览器来管理的，因此无法像客户端开发一样，自由的设置cookie

跨域访问

一个web页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

因此，与客户端不同，web原则上只能请求本域名的网络接口，除非该接口设置可以接受跨域访问。

性能

1.Flutter For Web 目前也是单页面应用。

编译后main.dart.js 轻松过 1M，导致首次加载时长可能过慢，比如 canvas 绘制可能会导致性能问题。

2. PC 端首次加载的速度略慢，而手机端会有超过 2S 的延迟。

   复杂列表滑动的时候帧率也只有十几，所以这里还有待官方后面对性能进行优化。

   示例网站：https://dev.kuyichang.com/

https://rive.app/

http://jetpack.ibaozi.cn

总结

Flutter For Web的优缺点总结

展望

1.对不同浏览器的支持
chrome、safari、firefox、ie/edge

image.png

2.性能的优化
js大小
渲染效率

3.生态的完善
第三方库的支持