Flutter2.0初體驗(Web支持)

常規(guī)操作，就是使用android studio編輯器，F(xiàn)lie--New--New Flutter Project

創(chuàng)新互聯(lián)堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十載網(wǎng)站建設經(jīng)驗創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營銷服務商,為您提供做網(wǎng)站、網(wǎng)站制作、網(wǎng)站設計、H5頁面制作、網(wǎng)站制作、品牌網(wǎng)站設計、微信小程序開發(fā)服務,給眾多知名企業(yè)提供過好品質(zhì)的建站服務。

一路直接Next+Finish ，項目就創(chuàng)建成功了。

常規(guī)的運行到手機或者模擬器上就不說了，下面說下運行到web瀏覽器上。

如上圖，選擇最后一個是手機真機調(diào)試，選擇Chome或者Edge都可以運行到web瀏覽器中，選擇好后點擊綠色運行按鈕。

flutter項目中添加web支持

Flutter 2.5.1

在項目目錄下，在終端運行以下命令：

Flutter 中文文檔 - Flutter 中文資源 | 在 Web 中展示圖片

在無法修改服務器配置的情況下可以使用html渲染。此外官方文檔中建議，如果顯示的圖片較多，使用html渲染性能更好

webview只支持移動端，其它平臺嘗試打開網(wǎng)頁

webview - web view for flutter web application - Stack Overflow

使用 package_info_plus | Flutter Package (pub.dev) 替換package_info

使用 --base-href ，可設置服務器子目錄

flutter web（3) 快速創(chuàng)建web工程并運行

如果沒有輸出可能原因有兩個

1.我們使用 vscode ## vs code支持的額很好。

版本問題 -- 自行查找對應版本

修改 yaml 文件中的版本知道運行成功?；蛘咧苯痈某蒩ny，從lock文件中找到真正版本再修改yaml中的文件

flutter 打包web

先運行下,看當前flutter 是否支持web項目, 如果沒有enable-web: true 則輸入 flutter config --enable-web

這時候項目中就包含了web文件夾.

輸入 flutter build web 就可以在build文件夾中生成web文件, 將它放到到tomcat或者其他容器就能訪問了!

附上項目的測試連接:

參考：