Flutter学习篇(七)—— flutter web ➡ 几分钟打造我的网站

导航

• Flutter学习篇(一)—— Dialog的简单使用
• Flutter学习篇(二)—— Drawer和水纹按压效果
• Flutter学习篇(三)—— MobX的使用和原理
• Flutter学习篇(四)—— 尺寸解惑
• Flutter学习篇(五)——路由剖析前篇
• Flutter学习篇(六)——路由剖析终篇

前言

随着Flutter1.9的正式发布，Flutter web已经合并到Flutter的主Repo, 这意味着之后只要使用同一套基准代码，就能够构建出移动端和网页端的应用，真正进入全平台时代。

架构

先放出两张图：

分别对应flutter web和flutter的架构图，很明显，Framework层是一致的，因此对于开发者来说，无感知，写的是同一套代码，区别在于flutter web底层是把dart代码转为js，而移动端则是使用skia引擎。

环境

其实对于作移动开发的技术人员，他们多多少少会很渴望拥有我的网站，但奈何web开发不精通，成本过高，而用了flutter web，将再也不苦恼。

先从环境配置开始:

flutter channel master
 flutter upgrade
 flutter config --enable-web
 cd <into project directory>
 flutter create .
复制代码

这个过程可能会花一些时间，具体看网速状况。

运行:

flutter run -d chrome
复制代码

打包

flutter build web
复制代码

具体能够查看Flutter中文网。

打包以后的产物以下：

index.html是入口，代码逻辑都编译在main.dart.js里面。

部署

当完成上述操做，就意味着离咱们的我的网站愈来愈近了，打包的产物已经有了，就差部署🔨了。这时候，有人会说，部署确定很麻烦啊，又要买服务器，又要配乱七八糟的环境，你这标题党，几分钟确定不行🤥。

别急别急，有个神器，叫作Github Page, 是github专门给开发者提供的免费站点，咱们能够在上面部署本身的网站，不少知名博主就是把本身的博客部署在github page上面。在github page部署的项目能够经过如下形式的连接访问: https://username.github.io/project，这样一来就等于拥有了服务器和域名。

我猜仍是会有人起哄，说这样没办法自动化部署，太鸡肋了。🙆还有我早有准备，其实，github还有另外一个神器，叫作Github Actions, 主要是提供持续集成的服务。这样一来，咱们就能够实现这样一个自动化部署的流程：

提交项目代码到github，触发github actions，执行flutter build web命令，把生成的产物部署到项目的gh_pages分支，关联gitHub page。

如此一来，咱们只要专一于编写本身的我的网站，其余部署等乱七八糟的事情就交给GitHub。固然，即便有这些准备，从0开始，几分钟仍是不足以打造本身的我的网站的😵，不过呢，有了demo就不同了😏，欢迎你们⭐。

我的网站

少年阿涛

参考

• Flutter官方中文网
• GitHub Actions 入门教程