Flutter Web Beta版本終於發佈了

在12月12號(不對，我不是應該剁手嗎？怎麼跑來學習了？哦。我忘了，我太窮了，只能多努力學習提高本身了，哪像各位大佬這時候還在摟着對象捂被子呢。。。o(╥﹏╥)o)的Flutter Interact 大會中，谷歌Flutter團隊給咱們帶來了最新的 Flutter 1.12 版本，在這次版本更新中，其中一個吸引人的功能就是「Flutter Web Beta」版本發佈了。也就是說能夠用它開發實際項目了。

---

B站視頻地址：www.bilibili.com/video/av790… 歡迎點贊投幣關注三連。

---

1、有了FlutterNative，爲何還要用Flutter Web？

由於開發人員構建的應用程序須要同時在移動設備和Web上運行，而且可以完美地運行起來。做爲開發人員，須要學習一組能夠輕鬆跨多個平臺遷移的技能是很是有必要的。Flutter支持Web，意味着開發人員可使用相同的代碼，更快地發佈功能，並確保其跨設備（Android、iOS、Web）體驗的一致性。此外，功能強大的Dart編譯器針對Web專門作了優化升級，而後Flutter架構是可移植的，這些就讓開發者使用Flutter可以輕易的建立出具備很是良好的性能的，交互式強的，多端一致性的Web體驗的程序。

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

---

2、Flutter Web支持的方案

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

1.聯網的獨立應用程序

Flutter可以使開發人員在移動端和瀏覽器中使用相同的代碼構建單個應用程序。這是Flutter Web的一個最初期開始就制定的一個方案，也是用的最普遍的一種跨平臺方案。這樣一來充分你用了Flutter的跨平臺的能力，真正作到了一次代碼，三端運行，而且具備一致性和高性能的特色，維護起來也很方便。（但願不要被那些黑心的老闆或者喜歡壓榨的技術管理看到，要否則程序員又要苦逼了。。。一我的幹3我的的活。。就問你爽不爽？）

2.嵌入式互動內容

一種狀況是在父站點中嵌入功能豐富的，以數據爲中心的mini應用程序，而且無需導航服務或其餘相似應用的功能。好比：你能夠嵌入一個數字遊戲，在線聊天機器人，房貸計算器，天氣預報等。

3.精簡版應用

精簡版Web應用程序可使用Flutter相同的工具，框架，UI組件和業務邏輯來提供較少的功能豐富的體驗以及相關功能。而後就能夠減小部分開發者由於安裝問題出現的難題而錯過了Flutter的使用。現有的Flutter應用程序具備輕量級的Web體驗，可爲公司帶來一箭雙鵰的體驗。

4.伴侶應用

Flutter Web是輔助，移動端應用程序是主體，使用Flutter構建的網絡體驗，而後用於支持你的移動應用程序。好比使用Flutter構建一個Web應用程序，使管理員或內部用戶能夠爲現有的Flutter移動應用程序建立內容或管理後端。儘管有點麻煩，可是Flutter Web這一部分能夠利用移動應用程序中的許多相同代碼。

---

3、豐富的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更完善。

---

4、待處理問題

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那些事，更多幹貨歡迎關注。