Flutter for Web開發環境搭建與驗證是怎樣的

Flutter for Web開發環境搭建與驗證是怎樣的，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

最新的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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。