Flutter新版本 Web App 尝鲜

随着 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吧，并且我以为页面初始化加载速率略慢。不过对于咱们客户端的同窗来讲没事还能写写网页仍是不错的了。