Flutter Web 开发部署

2,382 阅读1分钟

背景: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

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

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

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

buildweb.png

5.部署tomcat

tomcat.png

tomcat_root.png

  1. 启动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