大家今天跟大家伙儿聊聊我最近折腾的一个事儿——用 Flutter 搞网页开发。你们也知道，我这人就喜欢捣鼓点新玩意儿，听说 Flutter 现在也能做网页，我这颗躁动的心，就忍不住想试试。

说干就干，我先去网上扒拉一圈资料，大概解下情况。听说这玩意儿最大的好处就是“一套代码，多端运行”，啥意思？就是你写一份代码，既能跑在手机上，也能变成网页，甚至还能弄成桌面应用，听着就挺唬人的，对？

开整！

你得有个 Flutter 开发环境，这个我就不多说，网上教程一大堆。装好之后，我新建一个 Flutter 项目。

然后，我开始琢磨着怎么把这个项目变成网页。也简单，就几行命令的事儿。我打开终端，cd 到项目目录，然后敲几个命令，具体啥命令我记不太清，反正就是告诉 Flutter，“哥们，给我把这个项目编译成网页！”

等一会儿，编译完成。Flutter 在项目里生成一个 web 文件夹，里面就是网页的那些东西，什么 html、css、javascript 都有。

遇到的坑

这中间我也不是一帆风顺的。我发现，Flutter 生成的网页有两种模式，一种叫 html 模式，一种叫 canvaskit 模式。这俩有啥区别？

• html 模式：生成的网页文件比较小，但是兼容性可能差点意思。
• canvaskit 模式：兼容性效果也更炫酷，但是文件会大一些。

我一开始用的是 html 模式，结果发现有些效果在不同浏览器里显示的不一样，给我整的有点懵。后来我换成 canvaskit 模式，问题倒是解决，但是网页加载速度好像变慢，毕竟文件大嘛

最终效果

折腾一番，总算是把网页给弄出来。怎么说，感觉还行。至少，我用 Flutter 写的那些界面，在网页上都能正常显示，而且操作起来也挺流畅的。这对于我这种懒人来说，简直是福音，以后再也不用为每个平台单独写一套代码！

不过我也得说句实话，Flutter 网页开发目前还不是特别成熟。我遇到的那些兼容性问题、包体积问题，都说明这玩意儿还有很大的提升空间。但是，我相信随着 Flutter 的不断发展，这些问题肯定都会解决的。这回尝试还是挺有意思的，也让我对 Flutter 的未来充满期待！

好，今天就跟大家分享到这里。下次有机会，我再跟你们聊聊我用 Flutter 做的其他好玩的东西！