Flutter for Web 開發環境搭建與驗證

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

要快速掌握軟件開發技能，推薦匯智網的在線互動編程課程

一、安裝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

二、克隆Flutter Web代碼倉庫

目前Flutter Web是做爲一個單獨分支預覽，咱們將其克隆到本地：

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

如今hubwiz目錄組織以下：

~/hubwiz
  |- flutter     
  |- flutter_web

三、安裝Flutter Web構建工具

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

~/hubwiz$ flutter pub global activate webdev

四、驗證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開發環境搭建 - 匯智網