最新的Flutter 1.5.4已經支援Web開發，這個教程將介紹如何在Linux、windows和Mac下 安裝Flutter web開發環境：安裝Flutter SDK和Flutter Web構建工具，並利用Flutter Web 演示程式碼來驗證開發環境搭建成功。

要快速掌握軟體開發技能，推薦匯智網的線上互動程式設計課程

1、安裝Flutter SDK

首先安裝最新版的Flutter SDK，目前支援Linux、Windows和MacOS。

• Linux下Flutter SDK安裝

首先下載最新的Flutter SDK 1.5.4 for Linux。

然後解壓到指定目錄，例如~/hubwiz

~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

接下來把flutter sdk、dart sdk和webhubwiz執行檔案目錄加入PATH環境變數：

~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin
 

注意flutter sdk內建了dart sdk，上面第二條命令就是將dart-sdk的執行檔案加入PATH 環境變數。用於Flutter Web開發的構建工具包webdev在.pub-cache/bin目錄下，我們 先新增此路徑，稍後安裝。

• windows下Flutter SDK安裝

首先下載最新的Flutter SDK 1.5.4 for Windows

然後解壓到指定目錄，例如c:\hubwiz。

雙擊flutter目錄下的flutter_console.bat檔案，即可進入Flutter SDK控制檯環境。 也可以將Flutter SDK執行檔案路徑加入Path環境變數，例如c:\hubwiz\flutter\bin

• MacOS下Flutter SDK安裝

首先下載最新的Flutter SDK 1.5.4 for MacOS。

然後解壓到指定目錄，例如~/hubwiz：

~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

接下來把flutter sdk、dart sdk和webdev執行檔案目錄加入PATH環境變數：

~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin

2、克隆Flutter Web程式碼倉庫

目前Flutter Web是作為一個單獨分支預覽，我們將其克隆到本地：

~/hubwiz$ git clone https://github.com/flutter/flutter_web.git

現在hubwiz目錄組織如下：

~/hubwiz
  |- flutter     
  |- flutter_web

3、安裝Flutter Web構建工具

執行下面的命令安裝webdev包，它提供了用於Flutter Web開發的構建工具集：

~/hubwiz$ flutter pub global activate webdev

4、驗證Flutter Web開發環境的安裝

我們進入~/hubwiz/flutter_web/examples/hello_world目錄，來驗證Flutter Web 開發環境是否搭建成功：

~$ cd ~/hubwiz/flutter_web/examples/hello_world

然後安裝專案依賴包：

~/hubwiz/flutter_web/examples/hello_world$ flutter packages upgrade

現在就可以使用webdev啟動開發伺服器了：

~/hubwiz/flutter_web/examples/hello_world$ webdev serve

現在使用瀏覽器開啟http://localhost:8080，你就可以看到頁面中的Hello,world!了。

預設情況下，webdev serve命令僅監聽本地8080埠，如果你需要從其他機器訪問web服務， 可以使用--hostname引數來繫結所有網路介面： ?>

~/hubwiz/flutter_web/examples/hello_world$ webdev serve --hostname 0.0.0.0

原文：Flutter Web開發環境