Flutter for Web開發(fā)環(huán)境搭建與驗(yàn)證是怎樣的

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

最新的Flutter 1.5.4已經(jīng)支持Web開發(fā)，這個教程將介紹如何在Linux、windows和Mac下 安裝Flutter web開發(fā)環(huán)境：安裝Flutter SDK和Flutter Web構(gòu)建工具，并利用Flutter Web 演示代碼來驗(yàn)證開發(fā)環(huán)境搭建成功。

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執(zhí)行文件目錄加入PATH環(huán)境變量：

~/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內(nèi)置了dart sdk，上面第二條命令就是將dart-sdk的執(zhí)行文件加入PATH 環(huán)境變量。用于Flutter Web開發(fā)的構(gòu)建工具包webdev在.pub-cache/bin目錄下，我們 先添加此路徑，稍后安裝。

• windows下Flutter SDK安裝

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

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

雙擊flutter目錄下的flutter_console.bat文件，即可進(jìn)入Flutter SDK控制臺環(huán)境。 也可以將Flutter SDK執(zhí)行文件路徑加入Path環(huán)境變量，例如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執(zhí)行文件目錄加入PATH環(huán)境變量：

~/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是作為一個單獨(dú)分支預(yù)覽，我們將其克隆到本地：

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

現(xiàn)在hubwiz目錄組織如下：

~/hubwiz
  |- flutter     
  |- flutter_web

3、安裝Flutter Web構(gòu)建工具

執(zhí)行下面的命令安裝webdev包，它提供了用于Flutter Web開發(fā)的構(gòu)建工具集：

~/hubwiz$ flutter pub global activate webdev

4、驗(yàn)證Flutter Web開發(fā)環(huán)境的安裝

我們進(jìn)入~/hubwiz/flutter_web/examples/hello_world目錄，來驗(yàn)證Flutter Web 開發(fā)環(huán)境是否搭建成功：

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

然后安裝項(xiàng)目依賴包：

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

現(xiàn)在就可以使用webdev啟動開發(fā)服務(wù)器了：

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

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

默認(rèn)情況下，webdev serve命令僅監(jiān)聽本地8080端口，如果你需要從其他機(jī)器訪問web服務(wù)， 可以使用--hostname參數(shù)來綁定所有網(wǎng)絡(luò)接口： ?>

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

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