Flutter — 透過Dart打造一個web

大家知道Flutte可以建構ios跟android，但你可能不知道其實他也可以產生成一個web，而且UI還可以一模一樣，未來加上PWA，結合Chrome的add the main shortcut還可以讓他變成一個Web

Web support for Flutter

由於不太有時間，就附上找到的資料連結，其實有點麻煩，必須先切到beta版本，然後去enable web功能，以下資料就自己看囉

Building a web application with Flutter

之後可能原本你的專案是沒有這個功能的

你可以透過

flutter create

讓他重新產生有web的設定

flutter build web

你就可以看到你會出了web的選擇，這時候就可以按下讓他產生成網頁並且直接啟動一個local server進行測試

然後就是一個跨平台的web app(win /mac / android / ios / any web browser)

最後透過

flutter build web

就可以讓他產生成一個完整的web網站，在build folder可以看到

這就是一個release的結果，可以丟到任何host網站使用，其他有興趣的人在自己發現新功能吧!!

這邊有其他人的sample可以參考

Flutter samples

可以看到下面這個sample程式碼如此簡單

然後他的效果就是

只要下載

flutter/samples

然後用android studio IDE開啟他，一開始可能會說什麼pub錯誤，但他可以使用IDE幫你修正，直接跑起來就可以了。

另外你可把build/web 複製到別處，想先用電腦跑看看index.html，會發現一個問題，一片空白，用debug console一看，是CROS的問題，簡單來說就是如果你不是http:等開頭 (直接電腦看是files://…)，總之會有安全性的問題

How to launch html using Chrome at "--allow-file-access-from-files" mode?

這時候如果你是用mac簡單一點，在上面架設一個快速的server，先切到你的index目錄下，執行

python -m SimpleHTTPServer

這樣就可直接到瀏覽器輸入

localhost:8000

就可以看到結果了。

用 Python 的 SimpleHTTPServer 模組快速建立一個臨時網頁伺服器（Web Server） - G. T. Wang