Flutter web環境變量搭建及開發

使用flutter開發app已有三個月，有一些行為形成了慣性，在搭建flutter web環境變量時走了不少的坑，分享出來，免得其他小伙伴再走一遍。

 

首先flutter的版本要使用1.5及以上版本

dart要用2.3.0及以上版本。

 

安裝webdev，webdev是啟動本地服務器使用

flutter pub global activate webdev

然后配置環境變量

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

/*************下部分講解環境變量怎么配置*************/

1）打開終端，輸入

sudo vim .bash_profile

前面加sudo是防止沒有權限修改.bash_profile文件

如果該文件有權限，需要先輸入密碼，然后出現下圖所示，輸入E，進入編輯模式

​

進入.bash_profile文件輸入i，開始編輯，添加

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

后，按Esc，再按英文的冒號“:”，輸入wq，保存后退出

最后終端輸入

source .bash_profile

進行更新環境變量

/*************上部分講解環境變量怎么配置*************/

 

git clone flutter_web的代碼

在指定的文件夾內執行

git clone ​​​​​​​https://github.com/flutter/flutter_web.git

打開examples/hello_world

cd examples/hello_world/

更新包

輸入

flutter pub upgrade

出現下面內容后，便是更新成功

$ flutter pub upgrade
! flutter_web 0.0.0 from path ../../flutter_web
! flutter_web_ui 0.0.0 from path ../../flutter_web_ui
Running "flutter pub upgrade" in hello_world...                5.0s

執行

webdev serve

出現下面內容后，表示本地服務器啟動成功

[INFO] Generating build script completed, took 331ms
...
[INFO] Building new asset graph completed, took 1.4s
...
[INFO] Running build completed, took 27.9s
...
[INFO] Succeeded after 28.1s with 618 outputs (3233 actions)
Serving `web` on http://localhost:8080

在chrome瀏覽器中輸入http://localhost:8080

就可以看到效果了

 

 

當然也可以使用AS 或者VS code創建一個flutter web工程。

以VS code為例

首先打開VS code

選擇頂部狀態欄的View——>Command Palette...

出現下圖，輸入flutter，選擇Flutter: New Web Project,  編輯一個文件名，然后保存在指定的文件夾

​

出現web文件夾，並且web文件夾中有index.html,證明創建是成功的，

​

最后使用上面的方法運行該項目就可以。

 

祝各位小伙伴學習flutter成功，收獲多多。