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

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

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

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

二、Flutter Web支持的方案

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

1.聯(lián)網(wǎng)的獨立應用程序

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

2.嵌入式互動內容

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

3.精簡版應用

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

4.伴侶應用

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

三、豐富的Web插件支持

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

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

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

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

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，沒想到

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

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

四、待處理問題

1.輔助功能

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

2.多瀏覽器支持

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

3.測試范圍

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

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

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

總結

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

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