Flutter2.0重磅釋出！帶你一文打盡Flutter Engage

▐ 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

增量遷移到空安全

針對以下代碼，空安全将帶來顯著的機器碼減小:

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可用。

https://rive.app

Flutter Plasma

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

https://flutterplasma.dev

iRobot

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

https://code.irobot.com/#/

Mobi

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

https://www.moi.fi

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的體驗。

https://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的理想使用者場景呢？

這真的是一個好問題，随着這次标志性的釋出，我們已經聚焦在建構富互動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中的#?

這是一個很好的問題。讓我們從為什麼它的存在開始，今天我們有時候要使用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吧，我想它應該會工作良好的，而且也會持續工作很好，因為我們會做更多代碼修改。

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

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

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

空安全是否會破壞已有App? 是否有一些内容需要被遷移？

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

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

Flutter是否适合3D渲染？

我來回答吧。我們是把Flutter作為2D系統建構的。其實也有很多人用它來做3D工作。我們提供的API可以用來在一個螢幕上繪制2D對象。要支援3D，人們可以自行建立2.5D或者3D對象，然後通過紋理這樣的方式嵌入Flutter.有很多人就這麼做。

事實上Keynote中，我想就提到了Wallace & Gromit app。

它裡面就有2D和3D内容。将二者混在一起是可行的，但是再說一遍，Flutter是針對2D體驗設計的。

Flutter對于桌面的支援怎麼樣？

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

是的，我想多說一些，我喜歡Flutter Desktop，并且他已經在stable管道可用，他的開發體驗很棒。你隻需要打開它，Flutter自己就正常運作了，這種工作體驗很棒。試試吧，給我們寫回報，我想說，對于我，Flutter Web和Desktop公共的部分很棒。

什麼時候首次打開App動畫卡頓的問題可以得到解決？

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

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

谷歌打算如何在内部使用Flutter Web？

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

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

Dart何時支援WebAssembly？

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

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

同React,Angular相比你怎麼看Flutter Web？

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

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

你認為我們應該使用哪個管道？

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