一、切換分支並升級到最新版本
建議使用master分支。使用 flutter upgrade
命令升級到最新版本。
二、使用命令flutter run -d chrome
初次體驗就報錯了。
我新建了一個專案flutter_demo
,然後我執行flutter run -d chrome
,然而沒反應。
What's the problem?我開啟了谷歌瀏覽器,沒有任何反應。
三、解決方案
步驟1.執行flutter config --enable-web
命令,啟動這個預設命令,來實現Flutter Web支援。
步驟2.執行flutter run -d chrome
命令,會自動下載所需要的 Web SDK
步驟3.執行命令 flutter create .
步驟4.這時候再執行flutter run -d chrome
即可自動把Flutter程式碼執行在瀏覽器上面了。
以下是瀏覽器截圖:
總結
1.執行flutter config --enable-web
命令
2.執行命令 flutter create .
3.以後建立任何Flutter專案,只需要執行 flutter run -d chrome
命令即可執行在瀏覽器了。
四、生成release版本的web檔案
執行 flutter build web
命令即可把dart檔案編譯成html、js、css檔案,然後就可以部署到網站了。
命令列使用如下所示:
編譯生成的web需要的檔案在專案的根路徑的build/web
裡面,如下圖紅色框框所示:
五、部署到網站
(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)
◆ 問題二的解決方案:
刪除專案根目錄的.dart_tools
檔案,然後重新執行命令 flutter build web
即可。
(三)問題3:Flutter Web不支援元件直接跳轉到外部網頁
Flutter裡面的Button想要跳轉到網頁,我用的是 url_launcher
跳轉到外部網頁,如果使用 flutter build web
編譯後的頁面在瀏覽器沒任何效果。
我已經給官方提了 issues
,官方工作人員表示會盡快支援並完善該功能,還對我的反饋表示感謝。
(2)網站頁面
我們這裡只是演示一個計算器的小功能(程式碼來源於官方的sample),這裡只是把計算器的那個程式碼轉換為一個 Flutter Web功能的演示。
演示頁面: aweiloveandroid.github.io/flutter_dem…
GitHub 首頁: github.com/AweiLoveAnd…