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 入門教程