話不多說，flutter 支援web已經有一段時間了。最近因為單位有web需求，本身我是做iOS的，對web的熟悉程度還不及Flutter,並且單位的需求，不一定會用在生產環境之中，遂決定採用還在beta中的flutter web進行開發。

環境配置

1.安裝flutter環境

flutterchina.club/get-started…

這裡我就不再贅述了。

2.建立一個支援 web 的新專案

當前，需要 master 或者 dev 渠道的的 Flutter SDK 來獲取 Web 支援：這裡我們假定你已經安裝了 Flutter 命令列工具，執行下面的命令需要安裝 master 渠道最新的 SDK 噢： 你可以通過以下步驟建立一個支援 web 的新專案。

• tips:基本上都是在git上的操作，有可能會非常的慢，這裡提供一下可能有用的辦法。摘取自這位

Git 很慢的解決方法(或許有用)

$ sudo vi /private/etc/hosts
開啟後就進入編輯器，可移動最後一行，按下鍵盤上的“o”鍵，
會跳轉到下一行的輸入狀態。這樣就可以開始編輯hosts檔案了

複製下面的貼上進hosts即可
151.101.76.249 github.global.ssl.fastly.net
192.30.253.112 github.com

編輯好hosts檔案，按下鍵盤“Esc”按鍵，輸入“:wq”將會自動儲存，
就可以結束編輯器。
複製程式碼

2.1 使用最新的beta頻道中的Flutter SDK，並開啟web支援

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
$ flutter devices
複製程式碼

這個過程可能會非常的緩慢。 過程情況大概如下圖

flutter channel beta

切換到新的分支代表第一步成功 flutter upgrade

flutter config --enable-web

flutter devices

當看到chrome的時候，代表我們可以開幹了。

新建專案

經過一天的查詢資料，發現網上能找到的資料，可以說是千奇百怪。

有的通過VSCode 執行 Flutter:New Web Project

有的通過Android Studio 建立flutter 專案再手動連線。這個方式我看著非常的特殊，但是感覺又十分的繁瑣。

更有甚者拿著已經被搬運走的flutter_web說事。

著實是搞得我非常難受。

最後還是通過神奇的上網方式，找到了正確的姿勢，根本不需要那麼繁瑣（ 上面的那些情況，我想都是受到頻繁更新的影響導致的）。

跟著我一步一步做。

$ cd 你要放專案的目錄
$ flutter create 專案名
$ cd 專案名
$ flutter run -d chrome
複製程式碼

這時候，會自動開啟chrome，自動訪問 http://localhost:60700/#/

雖然網上好多說只支援Chrome，但是我把地址複製到Safari一樣可以訪問，並且暫時來說顯示沒什麼問題。

Chrome

Safari

要說區別的話，可能Safari載入相對比較慢(暫時畢竟才剛開始)。