在12月12號(不對，我不是應該剁手嗎？怎麼跑來學習了？哦。我忘了，我太窮了，只能多努力學習提升自己了，哪像各位大佬這時候還在摟著物件捂被子呢。。。o(╥﹏╥)o)的Flutter Interact 大會中，谷歌Flutter團隊給我們帶來了最新的 Flutter 1.12 版本，在此次版本更新中，其中一個吸引人的功能就是“Flutter Web Beta”版本釋出了。也就是說可以用它開發實際專案了。
B站視訊地址：www.bilibili.com/video/av790… 歡迎點贊投幣關注三連。
一、有了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的使用。現有的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那些事，更多幹貨歡迎關注。