Flutter Web 开发部署

背景：flutter目前版本已经升级到2.0，flutter-web也已经进入到了稳定版，修复了众多bug。
首先将flutter版本切换至2.0，使用上文说的工具

switch.png

使用方法：

1. 开启Web支持
   flutter config --enable-web

输出log：

Setting “enable-web” value to “true”.

You may need to restart any open editors for them to read new settings.

重启AndroidStudio

2. 老项目支持需要创建web 目录
   flutter create .

这样会在项目目录下创建web 目录

3. 运行应用在浏览器中
   //谷歌浏览器中运行
   flutter run -d chrome
4. 编译
   flutter build web

buildweb.png

5.部署tomcat

tomcat.png tomcat_root.png

6. 启动tomcat ，网页查看 http://localhost:8080/
   ./startup.sh

show.png

原本是准备在公司一个app里面想把原有一些配置协议规则简单的页面改造成flutter web形式，最后发现不太可行，flutter web的产物是一个完整的应用，不可能每个单独的页面都打包成一个应用。

对于客户端开发人员来说，特别是涉及到flutter开发的，可以零成本过渡到web项目的开发。对于现有的flutter项目，再剔除安卓特有的功能后，项目代码保持100%的可移植性，除了一些浏览器特有的属性，像鼠标的hover之类，各个端的表现差异不大，不必过于担心适配问题。

phone.png

由于web端一大部分由canvas进行绘制，当频繁缩放屏幕等需要进行页面重绘的操作时，很容易面临性能的问题。由于自身Flutter Web并没有专门的开发者工具，而Chrome自带的工具无法准确找到关键元素，导致后续开发调试困难。

webdebug.png