在昨天的Flutter Interact大會中，谷歌Flutter團隊給我們帶來了最新的Flutter 1.12版本，在此次版本更新中，其中一個吸引人的功能就是“Flutter Web Beta”版本發布了。也就是說可以用它開發實際項目了。

一、有了FlutterNative，為什么還要用Flutter Web？

因為開發人員構建的應用程序需要同時在移動設備和Web上運行，并且能夠完美地運行起來。作為開發人員，需要學習一組可以輕松跨多個平臺遷移的技能是非常有必要的。Flutter支持Web，意味著開發人員可以使用相同的代碼，更快地發布功能，并確保其跨設備(Android、iOS、Web)體驗的一致性。此外，功能強大的Dart編譯器針對Web專門做了優化升級，然后Flutter架構是可移植的，這些就讓開發者使用Flutter能夠輕易的創建出具有非常良好的性能的，交互式強的，多端一致性的Web體驗的程序。

我們看看Flutter Web的兼容性，簡直是太酷了！不管是手機、平板還是瀏覽器都能得到很好的兼容，完美！

二、Flutter Web支持的方案

Flutter團隊給出的適合Flutter Web特征的場景有以下這些：

1.聯網的獨立應用程序

Flutter可使開發人員在移動端和瀏覽器中使用相同的代碼構建單個應用程序。這是Flutter Web的一個最初期開始就制定的一個方案，也是用的最廣泛的一種跨平臺方案。這樣一來充分你用了Flutter的跨平臺的能力，真正做到了一次代碼，三端運行，并且具有一致性和高性能的特點，維護起來也很方便。(希望不要被那些黑心的老板或者喜歡壓榨的技術管理看到，要不然程序員又要苦逼了。。。一個人干3個人的活。。就問你爽不爽？)

2.嵌入式互動內容

一種情況是在父站點中嵌入功能豐富的，以數據為中心的mini應用程序，并且無需導航服務或其他類似應用的功能。比如：你可以嵌入一個數字游戲，在線聊天機器人，房貸計算器，天氣預報等。

3.精簡版應用

精簡版Web應用程序可以使用Flutter相同的工具，框架，UI組件和業務邏輯來提供較少的功能豐富的體驗以及相關功能。然后就可以減少部分開發者因為安裝問題出現的難題而錯過了Flutter的使用?，F有的Flutter應用程序具有輕量級的Web體驗，可為公司帶來兩全其美的體驗。

4.伴侶應用

Flutter Web是輔助，移動端應用程序是主體，使用Flutter構建的網絡體驗，然后用于支持你的移動應用程序。比如使用Flutter構建一個Web應用程序，使管理員或內部用戶可以為現有的Flutter移動應用程序創建內容或管理后端。盡管有點麻煩，但是Flutter Web這一部分可以利用移動應用程序中的許多相同代碼。

三、豐富的Web插件支持

pub.dev也做了更新升級，新增平臺標記和過濾。

在搜索頁面做了優化，列出了軟件包支持Dart還是Flutter，點擊Dart進去，就會看到右側有兩個細分類：Native、JS；點擊Flutter進去，就會看到右側有三個細分類：Android、iOS、Web。如果點擊Any就會顯示所有的插件庫。

然后，在軟件包詳細信息頁面上，列出了軟件包支持的平臺，如果是純Dart包，就會顯示這三個中的某些： Native、JS；如果支持Flutter，會顯示這三個中的某些：Android、iOS、Web。當然具體支持哪些要看每一個包的功能了。有Web標記的一定是支持Web的，這樣可以輕松確定軟件包是否具有Web支持。

Flutter團隊針對Web對一些包進行了升級，Flutter團隊已經幫我們把Flutter和JS相互調用的功能封裝好了，直接調用這些包里面的API就可以了，這些包可以在Flutter和Flutter Web上同時運行，所以不必擔心兼容性問題，開發起來還是很快捷方便的。包括以下這些：

shared_preferences Flutter插件，用于讀寫簡單的鍵值對。

firebase_core 可連接到多個Firebase應用程序

firebase_auth 用于Firebase身份驗證的Flutter插件

google_sign_in 谷歌登錄

url_launcher 路由導航

video_player 視頻播放

sentry Dart的崩潰報告庫

【PS】：我在3個月前Flutter1.9版本剛出來時的Flutter Web體驗時，

就對url_launcher不支持Web功能給Flutter提了一個issues，沒想到

這么快就實現了，不得不佩服谷歌Flutter團隊的辦事效率。

當然目前來看Flutter Web插件還不夠多，也希望各位大佬都踴躍參加，積極貢獻自己寫的插件，讓Flutter Web更完善。

四、待處理問題

1.輔助功能

目前已為跨平臺的輔助技術實現的一些功能包括諸如UI遍歷和遍歷順序，UI交互提示(如可輕擊，文本標簽，可編輯的文本，增量，圖片，活動區域和單選框)之類的功能。 桌面Web瀏覽器添加屏幕閱讀器的支持功能正在研發中。

2.多瀏覽器支持

隨著Flutter從僅移動的框架發展到涵蓋桌面UX習慣用法，Flutter對桌面Web瀏覽器的支持將得到改善，并變得更加無縫。Flutter Web團隊計劃在桌面Web瀏覽器和移動瀏覽器上支持和測試Chrome，Edge，Firefox和Safari。

3.測試范圍

Flutter Web的發布以來，Flutter Web團隊在框架和Flutter Web引擎上的測試范圍在逐漸增加。Flutter Web團隊已經在Chrome上運行自動化測試，并手動測試Safari。未來還有更多的測試工作要做。

本文首發在公眾號【Flutter那些事】，更多干貨歡迎關注。

最后給大家送上最新的福利，小伙伴們趕緊來看看吧：Flutter入門+進階實戰80講 - 盧召韋 - CSDN學院 - 在線視頻教程?edu.csdn.net

總結

以上是生活随笔為你收集整理的flutter和webapp_Flutter Web Beta版本终于发布了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。