作者：阿里巴巴淘系技術部-正物

3月4日凌晨，FlutterEngage活動以線上的方式舉行。整場活動內容豐富，精彩不斷，下面淘系技術專家就帶您回顧下這場年度Flutter技術的盛宴。

Flutter2.0

整場活動中，最令人激動的就是Flutter2.0的釋出了。那麼Flutter2.0主要帶來了哪些新的特性呢？

一句話總結，Flutter2.0最大的變化是除了之前已經處於stable渠道的移動裝置支援外，桌面和Web支援也正式宣佈進入stable渠道。

Dart2.12

獨一無二的應用構建能力集合

可移植性

Dart的高效編譯器可以生成針對x86&ARM的機器碼，以及針對Web優化過的JS。其廣泛支援了各種目標: 移動裝置、桌面PC、後端應用以及更多。

高開發效率

Dart提供的HotReload特性，支援快速的，可互動的開發體驗，不論是原生裝置還是Web應用均如此。Dart也提供豐富的物件用於應用開發，包括Isolate模型，async/await併發處理，以及事件驅動的開發模式。

健壯

Dart的健全空安全型別系統可以在編譯期捕獲錯誤，這一切高度可伸縮可信賴，並被用於支援大量的應用，如高度重要的Google Ads，Google Assistant，執行長達長達十年以上

健全的空安全

健全的空安全是自從Dart2.0引入健全型別系統後，Dart語言的一大改進。空安全進一步增強了型別系統，使得開發者可以去捕獲空錯誤，這也是應用崩潰的一大常見原因。通過引入空安全機制，開發者可以在開發期捕獲空錯誤，避免線上崩潰。

以下是健全空安全的幾大原則 預設非空: 對於型別系統的根本性變化

預設使用non-nullable 增量遷移到空安全

針對以下程式碼，空安全將帶來顯著的機器碼減小:

class Animal {
 int age = 0;
}
int getAge(Animal a) {
 return a.age; 
}
複製程式碼

持續改善已有功能

GooglePay包大小通過針對Flutter的優化大小降低了14% 針對不同的輸入，UTF8Decoder最快可以加速20x

用於整合Dart和C的FFI

Dart FFI使得你可以利用已有的C庫程式碼，這樣不僅提高了可移植性，也可以在效能敏感的場景下充分利用高度調優的C程式碼。Dart2.12中，FFI已經脫離beta階段，被認為是stable，可線上使用。並新增了以下特性。

• 按值傳遞結構體
• 結構體巢狀
• 自動生成FFI繫結

Dart語言的下一步

型別別名 三相移位操作符 通用元資訊註解 靜態超程式設計

Web

FlutterWeb正式進入stable渠道。隨著這一初始stable的釋出，已有Flutter程式碼Web平臺支援將進入一個新的階段，換句話說，當你使用Flutter2.0建立App時，Web只是一個新增的裝置目標。

藉助Web平臺的諸多能力，Flutter構建了可用於富互動Web應用的基礎。Flutter For Web(FFW)主要聚焦於高效能及高保真的渲染效能。除過HTML渲染後端外，FFW也新增了一個CanvasKit的渲染後端。以及諸多針對Web的特性，比如Link Widget,使得你的應用在瀏覽器中的執行可以真的感覺是一個Web應用。

在這一階段，FFW主要聚焦以下應用場景：

Progressive Web Apps(PWA) Single Page apps(SPA) 將已有Flutter移動應用擴充套件到Web側

架構設計

整個框架使用Dart編寫，總計約70w行的Flutter框架核心程式碼針對所有平臺是一致的，不論是mobile，desktop還是現在的web.你既可以使用dartdevc或者dart2js將程式碼編譯成javascript，進而執行在伺服器上。

鑑於Dart本身可以將整個Flutter框架編譯成JS，將Flutter執行在Web上的核心問題就是將移動應用的底層C++渲染引擎替換成對應的Web平臺API。Flutter並不是簡單地將Widget編譯成對應的HTML元素。相反，其Web引擎提供了兩種渲染後端選擇，HTML後端用於降低包大小，並提供廣泛的相容度。

CanvasKit後端使用了WebAssembly和WebGL來在瀏覽器Canvas上渲染Skia繪圖指令， 具有更高的效能和元件密度，但增加了大約2M的下載包大小。你可以通過以下命令來指定渲染後端。

--web-renderer html --web-render canvaskit

穩定的Web支援

Showcase

Rive

Rive, 是一個用於建立自定義動畫的工具，使用Flutter For Web來重構其程式碼，並已經beta可用。

Flutter Plasma

Flutter Plasma展示了一個執行在Safari, Firefox, Edge和Chrome上的Flutter Demo。

iRobot

iRobot教育使用Flutter開發了iRobot Coding App，通過將其在Web可用，提供了隨處可用的針對任何人的程式碼學習體驗。

Mobi

Moi Mobiili, 一個現代移動虛擬網路運營商，近期使用Flutter釋出了他們的Web應用。

Web的相關特性

自定義URL策略

新的Link Widget

基於Canvas的文字度量和渲染

文字互動(選擇，拷貝，貼上等)

支援桌面表單因子

展望

• CanvasKit的進一步支援，比如CORS圖片

• PWA的全離線支援

• 文字渲染以及功能

• 外掛生態系統的完善

桌面支援

Flutter Desktop也正式進入stable渠道，即初始釋出狀態。

Canonical正在同Flutter合作以將Flutter引入桌面，工程師們正在開發程式碼並且將其部署到Linux上。對其而言，各種各樣的硬體配置下提供穩定可靠並且優美的體驗是至關重要的。再往後看，Flutter將是後續Canonical桌面以及移動應用開發的預設選擇。

• 文字編輯體驗
• 滑鼠輸入體驗
• Scrollbar
• IME支援
• 桌面額外功能支援
• 更新的文件支援以將應用釋出到特定應用商店

摺疊裝置支援

微軟在持續擴大其對於Flutter的支援。除了在Flutter Engine中持續貢獻高質量的Windows支援外，微軟正在增加對於新的可摺疊Android裝置的引擎支援。這些裝置引入了新的設計模型，App既可擴充套件其內容，也可充分利用多屏特性提供side-by-side的體驗。

flutter.gskinner.com

此外，gskinner開發的Folio App，很好地詮釋了Flutter在多平臺上的執行。通過一套程式碼，不論是在小，中等還是大的螢幕上，Flutter均可處理好觸控，鍵盤和滑鼠輸入，並同平臺的特性適應良好(比如Web上的連結以及桌面上的選單)。

嵌入式裝置支援

豐田公司，宣佈了他們計劃提供市場上最好的機動車上的數字體驗，通過使用Flutter來構建娛樂資訊系統。使用Flutter標誌著同以前車載軟體完全不同的開發體驗。Toyota之所以使用Flutter，是因為以下的原因:

• 高效能和AOT一致性

• 智慧手機層的觸控機制

• 人類工程學

• 從客戶反饋中快速迭代

工具鏈

FlutterFix

如今有超過50w的Flutter開發者，我們所面臨的的裝置平臺也越來越多。當框架變得成熟，越來越大的時候，我們越來越需要去避免對於框架的修改，不要去破壞愈發龐大的程式碼庫。然而，為了持續改善Flutter，我們也需要能夠去對API做Breaking修改，問題來了，如何去持續改善FlutterAPI而不阻斷開發者體驗呢？我們提供了FlutterFix。

Flutter Fix包含了以下特性:

dart fix——新提供的命令列選項dart fix可用於查詢哪些API已經被廢棄，如何去更新這些API。 提供可供fix的選項 IDE外掛整合從而可以通過選擇完成修改

DevTools

• IDE外掛可幫助開發者清零問題，即便是DevTools還未啟動。

通過點選按鈕，即可快速找到引發問題的Widget。目前僅支援Layout Overflow異常，但DevTools團隊計劃去涵蓋所有的常見型別異常。

• 輕易發現高解析度的圖片，跟蹤降低過度的包大小與記憶體使用
• Inspector新增對於固定Layout的展示能力
• 記憶體檢視更快，小，易於使用
• 日誌Tab增加搜尋與過濾功能
• 在DevTools啟動前即可跟蹤日誌

社群與生態資料

Flutter1.0釋出至今已經兩年有餘，Flutter共計關閉了24541個Issue，合併了來自765個貢獻者的17039個PR。目前共計有50w+的Flutter開發者，超過15w的Flutter應用。 目前有15k的針對Flutter和Dart的Package，這其中包括了亞馬遜，微軟，Adobe，阿里巴巴，eBay，Square等公司，也要報關鍵包諸如Lottie, Sentry, SVG,以及Flutter Favorite推薦的sign_in_with_apple, google_fonts, geolocator和sqlite.

其他

• Add2App中的多引擎例項

過去，額外的Flutter引擎建立會造成同第一個例項同樣的記憶體開銷。在Flutter2.0上，我們將這一記憶體開銷減少到了每個例項180KB，降低了99%之多。由此，我們推薦在你的原生App中去使用多個Flutter引擎例項。

• DartPad升級到支援Flutter2.0

AskFlutter圓桌

參與這場圓桌的成員有：Andrew Brogdon(主持人)、Eric Seidel(Flutter負責人)、Ian Hickson(Flutter技術負責人)、 Mariam Hasnany(FlutterForWeb PM)、Frank van Puffelen(開發者專案工程師)。

以下針對一些重要的問題做了摘錄:

主持人：什麼時候FlutterWeb可以供生產環境使用?

M：好訊息是，今天Flutter Web正式在stable渠道可用。你無需enable任何flags，即可將Web作為Flutter應用的目標裝置。也就意味著，對於任何已經有Flutter Web App的開發者，你現在可以用stable渠道來構建你的應用，如果你是要新開發Flutter Web Apps,快來檢出把。

主持人：什麼是Flutter Web的理想使用者場景呢？

M：這真的是一個好問題，隨著這次標誌性的釋出，我們已經聚焦在構建富互動Web應用的基礎。如果你已經有一個Flutter移動應用，你現在可以使用同樣的程式碼來構建其Web版本，然後把你的使用者群基礎擴充套件到整個Web應用。不僅如此，這對於構建PWA或者SPAde應用來說也是一個額外的優勢。這些應用通常使用大量的動態內容，互動UI，我們通常認為這三種是最適合的。當然為了支援文件為中心的頁面我們還需要很多工作去做。比如，傳統的HTML頁面有很多的文字，靜態的內容。所以我想現在我們的確已經很適合來開發Web應用。

主持人：目前在Github上有超過8200個Open Issues、Flutter似乎有些人手不足，有沒有計劃加以改善這種問題或者你們的優先順序是什麼？

I：是的，我們的確有這麼多，正如Netlinx(提問者)問道的，我們有8000多處於Open狀態的Issues, 但重要的是我們正在盡力去解決他們，比如去年我們在Github上收到了15000多Issues，我們也關閉了15000issues。我們對修復和解決bug的比例還是很高興的。這一數字表徵了我們有多少使用者。越多人使用，就有越多的bug提出。我們解決issue的數字是一個貢獻者多少的指標，我們很多貢獻者。在Github的Flutter Hacker組裡，我們有超過200人。一半以上是谷歌員工，大部分貢獻者並不是。事實上，部分Flutter Team的人是來自開源專案的，他們可能是微軟或者Canonical，或者是使用自己時間的志願者。不同的人投入的時間不同，他們都給這個專案做出了共享，希望我們可以解決更多的問題，讓Netlinx高興。

主持人：Flutter Web什麼時候會廢棄URL中的#?

M：這是一個很好的問題。讓我們從為什麼它的存在開始，今天我們有時候要使用hash URL策略，這是當我們初始這個Web引擎的時候決定的。也就是說當你有Flutter具名路由的時候，我們基本上是初始化這些路由作為hash的一部分，新增到URL上。隨著今天Stable的釋出，我們有了新的辦法來自定義URL，從URL中丟棄hash。這樣你就可以按照自己的方式來構建URL，配置其餘的子URL，實現deep link或者說同朋友來一起分享。社群中也有一個叫做URL Strategy的外掛，它實現了我們在文件中的指南，以一種很簡單的方式。

主持人：Flutter依然有很多Mac M1上的相容性問題，你們是否在加以解決還是說我需要買一箇舊的Intel Mac?

E：我想說你不需要買一個新電腦，我建議你今天再試試。Flutter2.0上有很多針對M1的優化。其實我們也是同社群同一時間知道M1新發布的這類資訊的。當天我們就訂購了一個M1的開發機並用它開始工作。我們將其分為了三個桶，用來執行App, 工具鏈以及開發工具。據我所知，前兩個桶其執行都是良好的。當然隨著Flutter2.0的正式釋出，如果你遇到了M1或者其他的問題，我們想聽到你的反饋。正如Ian所說，我們每天有很多Issues,我們想去儘快去解決他們。因此，快去試試Flutter2.0吧，我想它應該會工作良好的，而且也會持續工作很好，因為我們會做更多程式碼修改。

I：M1有意思的是它幾乎是一個全新的平臺，因為我們以前從來沒有用ARM作為host。今天我們釋出Web和Desktop，但是，實際上，Apple Silicon是蘋果自己的平臺，我們要去支援。雖然我們現在已經支援當前release的macOS,但是依然有大量的工作要去做。

主持人：Flutter Dart團隊是否計劃去提供針對App開發的官方指南？類似Android的Jetpack？

I：我要笑了，因為你把這個問題丟給我似乎你不知道這個答案一樣。我們已經討論了好幾個禮拜了，是的，我們有，實際上，我想或者是今天或者是很快，我們會發一個新的模板到Flutter master分支，這個模板基本上就是這個問題的答案。如何去使用最佳實踐來建立和應用，狀態復原等等？不僅是這個問題的答案。程式設計的核心在於針對這些問題有很多的差別，不同的App有不同的需要，我們希望這樣特定的模板可以真的幫助到大家，我們也希望後續可以有針對不同架構型別的模板。可能你更喜歡redux而不是我們在模板中使用的。這個今天不會隨著Flutter2.0釋出，但是我想會在未來幾個月的stable版本中發出。

主持人：空安全是否會破壞已有App? 是否有一些內容需要被遷移？

E：這個問題是你能夠去遷移。甚至有個工具可以使用。我想應該叫做dart fix,你可以在你的程式碼庫上執行它，將會幫助你去將程式碼改成Null aware.

I：如果你關注了更早的Keynote，我們有一章是關於他如何工作的。這並不會產生破壞性，你首先要確保你的依賴都已經順利遷移。如果你的依賴沒有遷移，對你來說遷移自己的程式碼將很困難。這是可能的，但會變的低效。所以，如你所知，如果你有一個包還沒有遷移，去讓這個包的開發者完成遷移。即便不遷移，也不會有特別的破壞性。正如Keynote提到的，這是為什麼我們不把這次釋出叫做Dart3.它是向後相容的。同其他語言一樣，Dart空安全裡，你可以決定使用哪個版本，Dart2.0或者更高。我們在Flutter Sample倉庫裡經歷過這些，我們觀察例子，看看有多少依賴。對他們進行排序，隨著Flutter2.0，我們事實上已經處理完了Sample倉庫。另一個我們部署空安全方式的好處是，你可以同時編譯空安全和非空安全，編譯器自己會使用空安全優化。他可以在編譯空安全程式碼的時候知道型別。當到了非空安全程式碼邊界的時候，他會新增判空邏輯。我們稱之為非健全空安全。如果我沒記錯的話，因而你的程式碼可以在混合模式下執行，也是可以的。

主持人：Flutter是否適合3D渲染？

E：我來回答吧。我們是把Flutter作為2D系統構建的。其實也有很多人用它來做3D工作。我們提供的API可以用來在一個螢幕上繪製2D物件。要支援3D，人們可以自行建立2.5D或者3D物件，然後通過紋理這樣的方式嵌入Flutter.有很多人就這麼做。 事實上Keynote中，我想就提到了Wallace & Gromit app。 它裡面就有2D和3D內容。將二者混在一起是可行的，但是再說一遍，Flutter是針對2D體驗設計的。

主持人：Flutter對於桌面的支援怎麼樣？

I：是的，Flutter Desktop如今已經在stable渠道可用，儘管我們不認為它是完全stable了，我們支援macOS, Windows和Linux現在。還有什麼呢？我們還沒有提供你可能需要的所有必須特性，例如，我們目前還沒有支援多視窗，儘管這已經在開發了。我們還有很多努力。支援基本的單視窗App是非常穩定的。我自己就寫了一個數獨應用，執行在Mac上，工作很棒。

E：是的，我想多說一些，我喜歡Flutter Desktop，並且他已經在stable渠道可用，他的開發體驗很棒。你只需要開啟它，Flutter自己就正常執行了，這種工作體驗很棒。試試吧，給我們寫反饋，我想說，對於我，Flutter Web和Desktop公共的部分很棒。

主持人：什麼時候首次開啟App動畫卡頓的問題可以得到解決？

E：這是一個普遍的問題，特別是最近幾周，我在Reddit上寫了很長的帖子，我也正在寫一個更長的部落格。我想說的是效能一直是Flutter最基礎的一個衡量，當我們五六年前討論這個專案的時候，我們就在說先談論效能。在我們的任務列表中，效能是排名第一的。這不僅僅是文字，我們通過各種方式去保證這一點。所有的提交都要首先通過各種各樣的效能測試，包括所有平臺。我們一直在追求效能優化，每天都是如此。尤其當面對首次啟動的動畫卡頓的問題，我們意識到這個問題已經有一段時間了，尤其是iOS上。過去的一年這個問題在某些場景下愈加惡化。當從OpenGL遷移到Metal的時候，我們不能夠在去快取Shaders，你必須使用GPU去產生這些畫素。不論如何，我們已經充分意識到有這樣的問題，正在努力去解決，很多人力投入其中。Ian就在攻堅這些問題。

I：是的，我一直在關注這些卡頓的issues，這是我現在非常關注的問題。你可以看看Github Probject188, 我內心裡一直記著這個數字因為我經常開啟它。那裡有所有相關的問題。你能做到最好的事情就是，如同我們之前討論的，如果你遇到應用卡頓，請提一個bug，帶上覆現程式碼，包括顯示卡頓的視訊，以及時間線的trace以說明你的應用在視訊中具體在幹什麼。這是目前對於我們來說最有幫助的了，我們可以去研究特定的Case，他們並不都是因為同樣的原因造成的。即便是Shaders的原因，也不一定是因為同樣的Shaders。所有這些不同的bug將會被以不同的問題加以解決。

主持人：谷歌打算如何在內部使用Flutter Web？

E：我不能，你知道的，談論其他團隊的計劃，我能說的是有很多團隊正常嘗試使用Flutter Web. Flutter Web今天剛剛來到stable渠道，我們也正在給內部團隊類似的指引，知道的，我們依然在解決各種問題。所以今天並沒有什麼能宣佈的，但是我可以期待有更多的對於Flutter Web的使用。我致力於這個工程技術，認為這是一種更好的方式來寫一次程式碼，可以執行在各個平臺上。我們已經看到很多谷歌團隊接受了Flutter的這一策略，我想Flutter會繼續來到更多的應用場景的。

I：我們已經看到內部的很多工具使用Flutter For Web.當這些工具背後沒有一個大的團隊的時候，他們需要一些有用且可以高效開發的工具。比如，在Flutter團隊裡，我們使用Flutter Web來開發一些內部工具，用於把公共的Flutter程式碼遷移到如GooglePay這樣的內部倉庫中，以及供其他團隊使用。這些工具都是使用Flutter寫的。

主持人：Dart何時支援WebAssembly？

I：這意味著很多問題，我們實際上已經在Flutter For Web中使用WebAssembly了。Mariam可能可以談更多，簡單來說，我們有其他兩部分WebAssembly和Dart相關。一個是是否直接把Dart編譯成WebAssembly，另一個是，是否可使用已經編譯成WebAssembly的程式碼並且將其同Dart連結。對於第二問題而言，把WebAssembly連線到Dart，我想有一個包已經可以做到這一點。雖然不是最方便的方式，但是是可行的。至於將Dart編譯成WebAssembly，目前還是不可行的。這需要WebAssembly去實現一些尚不成熟的特性，WebAssembly GC，多執行緒等等。我們對此很感興趣，我想WebAssembly有潛力在未來幾年真的成為一種統一的互操作語言。

M：Flutter Web目前有兩個渲染後端，我們預設使用HTML。HTML+DOM+CSS後端這種方式來渲染應用，但我們也在嘗試使用CanvasKit來進行渲染。今天我們已經穩定下來，你可以使用CanvasKit，它採用了WebAssembly和WebGLS來渲染App，以在瀏覽器中替代Skia.針對這兩個不同的渲染後端，我們也有一些叫做auto的內容。他可以針對不同的環境來選擇渲染器，在桌面中使用CanvasKit,在移動瀏覽器中使用HTML，以便充分採用兩者的優點。

主持人：同React,Angular相比你怎麼看Flutter Web？

E：我首先想到的是，Flutter Web,我們只是在Canvas中繪製，我們認為是直通GPU/CPU,我想這是同React和Angular很大的不同。

I：我總是很猶豫去把Flutter同別的技術去做對比，因為每一個都有有效的使用者場景。我不想去提React說，React這裡好，那裡不好。這完全取決於React，我們很高興能溝通這些其他技術並存，我們也希望整個社群作為一個整體可以寫出指南說，你知道什麼樣的場景下Flutter很適合，什麼場景下Flutter For Web很適合，什麼樣的場景下React很適合等等。

主持人：你認為我們應該使用哪個渠道？

I：Stage主要的區別是，stable同其他渠道的差別，我們會把fix pick到stable channel。因此你可以看到stable channel每次更新變化都很小。這一點不會發生在dev分支上。我們不會檢查dev渠道，如果dev出了問題，他會被在trunk上修掉，然後我們重新會在未來幾天生成一次dev.這也不會發生在主線上因為我們一直在主線開發。這裡就有風險，越近的程式碼，越容易有我們沒有捕獲i的問題。當然，他們最終都會被修復，這是一個權衡。

結論

這是個令人振奮的釋出，至此我們可以說Flutter真正做到了以應用為中心，全平臺的支援。不論是面向移動，還是面向桌面，或者是Web，Flutter都做到了產品級可用。面對日趨激烈的業務競爭，其可顯著降低開發成本與人員不足/不均衡的問題，提供更穩定一致的使用者體驗。

但從另一個方面講，國內市場普遍面臨的Legacy System的問題，目前看從官方渠道並沒有一個解決方案。尤其是對於桌面端的問題，Windows XP，Win32這樣的應用場景下，以及FlutterWeb效能體驗相容度的問題，業務方還是需要一定的備選方案。其他的諸如移動裝置效能，包大小，動態性，瀏覽器相容度，目前原理上本身已經不是問題，只是為了效能，大小，體驗考慮，還是需要做更多的深入細緻的優化工作。

結論參考資料

What’s New in Flutter 2.0

Announcing Dart 2.12

Flutter web support hits the stable milestone

Language design funnel

Flutter design doc

Flutter Engage Youtube

Flutter Folio

Announcing Flutter support for foldable devices