Flutter
的快速发展,现在Flutter
生态也日渐壮大,偶然打开Flutter
的官方文档发现已经支持了Web
开发,于是便前去探探路,给大家分享点干货。
准备工作
首先我们这里以默认Flutter
创建的项目为例,也就是New
一个Flutter Project
,有的同学会发现目录下并没有Web
这个目录,所以在参考官网进行flutter run -d chrome
命令的时候是无效的。
第一步先检查当前的Flutter
分支是否处在master
上面。执行命令
flutter channel
如果在master
分支上Terminal
内会打印如下。
flutter channels:
beta
dev
* master
stable
如果没在master
分支上则切换至master
上.
flutter channel master
随后对Flutter
的SDK进行更新,执行如下命令。至此我们的SDK就具备构建Web的能力了。
flutter upgrade
构建Web项目
更新完SDK的同学们肯定都想跃跃欲试,遂照着官网敲下flutter run -d chrome
,随后发现SDK报错~此处还是埋了一坑,其原因是SDK没有启用Web工具
构建项目,目前Web
开发还处于发育阶段。执行如下命令启用项目。
flutter config --enable-web
然后再执行
flutter create .
当你看到Flutter
在终端给你的彩蛋就说明已经搭建成功了,并且会告诉你现在Web工具
处于试错阶段,生产环境还是要慎用。此时你会发现你的项目存在了一个Web
的目录。
Debug And Release
执行完上述命令过后我们就可以使用Chrome
来调试我们的页面了,在Android Studio
中设备选择会多了几个选项
Chrome(web)
会直接运行在Chrome
浏览器上,当选择Server(web)
的时候会在终端输出一个地址如http://localhost:54125/
将地址输入到浏览器中即可访问。也可用过命令工具进行Debug
flutter run -d chrome
Android Studio
默认会使用dhttpd
来搭建HTTP服务,关于dhttpd
我就不过多赘述,官方文档有详细的描述,实际上类似于python -m SimpleHTTPServer 80
。
当我们尝试发布的时候,先对Web
项目进行构建,在项目根目录下执行
flutter build web
在build目录下产生对应的文件,结构如下。
/build/web
assets
AssetManifest.json
FontManifest.json
LICENSE
fonts
MaterialIcons-Regular.ttf
<other font files>
<image files>
index.html
main.dart.js
main.dart.js.map
在打包的时候则需将build目录整体打包,去除ios
及android
目录,上传到服务器即可。
随后在服务器下对其进行解压,CD
到/build/web
目录下开启Http服务
,别人就可以看到你的网站啦,官网的例子是dhttp
和python
,我试用Nginx
也完全没有问题。
如果想使用本地服务调试,也可以CD
到/build/web
执行
flutter pub global run dhttpd
端口默认是8080
,在浏览器中输入localhost:8080
即可查看页面。
没有dhttpd
话用pub
安装一下即可。
总结
从Flutter
的进展可以看出Google
在跨平台上下的决心,一份代码现在可以产出三端,不过我个人觉得一个项目有了IOS
和Android
两端后,没人会去用Web App
吧,而且我觉得页面初始化加载速率略慢。不过对于我们客户端的同学来说没事还能写写网页还是不错的了。