Flutter1.9升級體驗總結(幫大家填坑了)

AWeiLoveAndroid發表於2019-09-13

一、切換分支並升級到最新版本

建議使用master分支。使用 flutter upgrade 命令升級到最新版本。

二、使用命令flutter run -d chrome初次體驗就報錯了。

我新建了一個專案flutter_demo,然後我執行flutter run -d chrome,然而沒反應。

Flutter1.9升級體驗總結(幫大家填坑了)

What's the problem?我開啟了谷歌瀏覽器,沒有任何反應。

三、解決方案

步驟1.執行flutter config --enable-web命令,啟動這個預設命令,來實現Flutter Web支援。

Flutter1.9升級體驗總結(幫大家填坑了)

步驟2.執行flutter run -d chrome命令,會自動下載所需要的 Web SDK

Flutter1.9升級體驗總結(幫大家填坑了)

步驟3.執行命令 flutter create .

Flutter1.9升級體驗總結(幫大家填坑了)

步驟4.這時候再執行flutter run -d chrome即可自動把Flutter程式碼執行在瀏覽器上面了。

Flutter1.9升級體驗總結(幫大家填坑了)

以下是瀏覽器截圖:

Flutter1.9升級體驗總結(幫大家填坑了)

總結

1.執行flutter config --enable-web命令
2.執行命令 flutter create .
3.以後建立任何Flutter專案,只需要執行 flutter run -d chrome 命令即可執行在瀏覽器了。

四、生成release版本的web檔案

執行 flutter build web 命令即可把dart檔案編譯成html、js、css檔案,然後就可以部署到網站了。

命令列使用如下所示:

Flutter1.9升級體驗總結(幫大家填坑了)

編譯生成的web需要的檔案在專案的根路徑的build/web裡面,如下圖紅色框框所示:

Flutter1.9升級體驗總結(幫大家填坑了)

五、部署到網站

(1)部署的時候遇到的坑和解決方案

問題1:部署到網頁怎麼也打不開頁面,一直是空白的,僅僅是本地除錯的時候是可以執行的。

我發現部署到GitHub或者外部網站,怎麼也打不開網頁,後來我看到了在專案的根路徑的build/web裡面,有一個main.dart.js.map的檔案。裡面引入了本地的flutter_web_sdk目錄的相關檔案。然後我就去找對應的檔案所在路徑。

◆ 問題一的解決方案:

找到Flutter安裝路徑(例如:我的是 E:/develop/flutter),然後開啟裡面的bin/cache/flutter_web_sdk,將 flutter_web_sdk資料夾複製到 專案根目錄/build/web裡面,然後重新執行 flutter build web 即可。

問題2: FileSystemException: Deletion failed, path = '.dart_tool/build/flutter_web' (OS Error: 目錄不是空的, errno = 145)

Flutter1.9升級體驗總結(幫大家填坑了)

◆ 問題二的解決方案:

刪除專案根目錄的.dart_tools檔案,然後重新執行命令 flutter build web 即可。

(三)問題3:Flutter Web不支援元件直接跳轉到外部網頁

Flutter裡面的Button想要跳轉到網頁,我用的是 url_launcher跳轉到外部網頁,如果使用 flutter build web編譯後的頁面在瀏覽器沒任何效果。

Flutter1.9升級體驗總結(幫大家填坑了)

我已經給官方提了 issues,官方工作人員表示會盡快支援並完善該功能,還對我的反饋表示感謝。

(2)網站頁面

我們這裡只是演示一個計算器的小功能(程式碼來源於官方的sample),這裡只是把計算器的那個程式碼轉換為一個 Flutter Web功能的演示。

演示頁面: aweiloveandroid.github.io/flutter_dem…

GitHub 首頁: github.com/AweiLoveAnd…

(3)網站頁面示例gif圖形演示

Flutter1.9升級體驗總結(幫大家填坑了)

相關文章