web開發又多了一個選擇：Flutter

來源：https://www.jianshu.com/p/983818251079

Flutter Web

Flutter已經不僅僅可以運行在Android或者iOS上，還可以運行在Windows, MacOS, Linux, Chrome OS甚至是Web上。

設計框架

flutter移動架構

Flutter使用多層架構，最底層是C++編寫的引擎，之上是用Dart編寫的多層框架。引擎通過dart:ui庫暴露給上層框架，dart:ui只負責圖片繪製，其他工作都由上層框架完成。大部分引擎代碼使用C++編寫，與特定平臺相關的如插件系統等，使用平臺對應的語言編寫：iOS使用Objective-C，Android使用Java。

flutter_architecture.png

flutter web架構

要使Flutter運行於Web之上，需要解決三個主要問題：1. 編譯Dart為JavaScript 2. 選擇可運行於Web之上的功能，剔除與特定平臺相關的模塊 3. 選擇合適的Web特性來實現Flutter的功能。為此，Flutter項目組實現了三種原型：純組件層（widgets）、組件加自定義佈局（Widgets + custom layout），以及構建全新的底層Web引擎。諸多嘗試後，Flutter項目組發現只有第三種方式才能夠保證真正跨平臺，即為Flutter實現一個全新的Web引擎。

flutter_web_architecture.png

實現

Web引擎的實現大致需要三個步驟：構建組件、排版以及繪製。

組件的構建過程相對簡單直接，將組件載入內存，監控它們的狀態變化，並把需要更新的數據輸送到排版、繪製階段即可。得益於Dart最新的super-mixin特性，所有Flutter組件和組件框架都幾乎能被完美編譯為JavaScript。

排版階段相對複雜，最大的挑戰來自文字排版。Flutter使用段落（Paragraph）的 layout 方法完成文字排版，但Web端卻沒有相應的文字排版API。此問題的解決方法：將文本插入到html dom中，先讓瀏覽器完成排版，然後再讀取回文本的高度、寬度等各種屬性。

最後的也是最複雜的繪製階段。Web端可用的特性有HTML/CSS、Canvas、SVG和WebGL等，其中WebGL過於底層和複雜，而純HTML/CSS的實現又要求改動Flutter現有的API。項目組還在積極研究此階段的最優方案，目前的候選方案有兩種：HTML+CSS+Canvas 和 CSS Paint API。下面簡要概括這兩種方案的原理：

• HTML+CSS+Canvas - Flutter上層框架會生成大量層（Layer 3），其中簡單的圖片層使用HTML+CSS繪製，且稱之為DomCanvas實現；複雜的圖片層則使用2D Canvas繪製，並稱之為BitmapCanvas實現（瀏覽器底層使用Bitmap實現canvas）。除圖片（Picture）外的其他層，會被轉換為自定義html標籤表示，比如：Opacity 會被轉換為 <flt-opacity>。這樣，Flutter頁面就被轉換為由html標籤、DomCanvas以及BitmapCanvas組成的樹狀結構。這種實現方式在所有現代瀏覽器都可以正常工作，是目前首選的方案。

  
  轉換前：
  /<flt-opacity>

  flutter_engine_tree.png

  
  轉換後：
  

  flutter_html_tree.png

• CSS Paint API - CSS Paint 10 是眾多瀏覽器廠商合作設計的Web端新API，它的主要特性是使普通的Html元素具備繪圖能力，它底層不使用Bitmap，效率高而且不阻塞JavaScript線程。藉助此API，可以直接使用

  和並配合自定義CSS屬性完成繪製。CSS Paint API還比較新，不是所有瀏覽器都支持，但它應該是未來Flutter Web的完美實現方案之一。

其他

• Flutter Web應用可以調用所有已有的Dart Web庫，而且支持使用dart:js和package:js與JavaScript交互。

• 出於性能以及可移植性考慮，Flutter Web應用目前不支持直接使用CSS，即跟原生Flutter一樣，全部使用組件代碼來實現樣式。

• Flutter Web應用暫不支持嵌入到其他Web應用中，但可能會使用iframe或Shadow Dom方式實現。

• 其他Web組件如：html自定義標籤、React組件、Angular組件等，都還不能嵌入Flutter Web應用中。主要問題是這些組件會引入CSS，可能帶來不可預知的影響，項目組還在研究應對方案。

• Flutter Web版將保證最大的可移植性，但並不意味所有Flutter應用都不用修改就能運行於Web之上，比如：使用了ARCore等Web端不具備的功能的應用。

安裝

• 更新flutter需要1.5.4以上的版本

• flutter channel master && flutter upgrade

檢查版本

flutter doctor

• 把.pub-cache/bin加入PATH中比如

• windows：




• C:\\Users\\<your-username>\\AppData\\Roaming\\Pub\\Cache\\bin/<your-username>




• mac或linux$FLUTTER_HOME/.pub-cache/bin




• 安裝webdev

• $ flutter pub global activate webdev




• webdev --help

實踐

強烈推薦Visual Studio Code開發工具，輕量而且強大，支持各種語言開發，做一些代碼驗證特別方便。以下都是用code操作，如果用android studio是類似的。

創建新項目

前提是安裝了flutter和dart插件，這個就略過了，大家自己安裝。

• 打開命令 Ctrl+Shift+P控制，找到選擇Flutter: New Web Project，如果沒有，則是插件沒有安裝好。然後等待輸入項目名字回車即可。

  web_hello.png

• 打開菜單的Debug，選擇Start Debugging，選擇Dart & flutter即可，等待構建完成，會打開默認瀏覽器看到項目運行

  helloworld.png

運行已有的項目

谷歌已經把gallery示例運行到web上，可以看到效果還是很驚人的，後面有資料有鏈接可以詳細參考。下面運行galllery步驟：

• 把代碼下載下來https://github.com/flutter/flutter_web.git

• 進入到倉庫的gallery目錄
  cd examples/hello_world/

• 更新包
  flutter pub upgrade

• 本地運行
  webdev serve
  如果提示webdev需要升級，可以再次執行下面的命令即可：
  flutter pub global activate webdev
  

  webdev

• 瀏覽器訪問前面給的鏈接 http://localhost:8080
  

  gallery

資料

Hummingbird: Building Flutter for the Web
Flutter for Web - Flutter的Web端運行引擎初探

https://github.com/flutter/flutter_web