哈囉 Flutter for web！
Google I/O 2019 最讓 WEB 開發者注意的事情就是宣佈了 Flutter for web 第一個技術預覽版本，同時釋出 Flutter 1.5 版本。
Quick Review — 什麼是 Flutter ?
先來看看 Flutter 的官方網站對自己的形容：
“Flutter is Google’s portable UI toolkit for building beautiful, native applications for mobile, web, and desktop from a single codebase.”
Flutter 是一個由 Google 開發、開源及免費的跨平台行動應用程式框架，可以快速的開發 Android 及 iOS 原生使用者介面應用程式，而且可以相容於現有的專案，使用 Dart 為開發的程式語言。開發人員可以透過單一套程式碼，編譯後同時運行在 Android 及 iOS 等各平台，並且使用由 Flutter 自己的渲染引擎繪製圖層、widget，保持各平台 UI 的一致性，Flutter 也提供了許多元件、應用介面、快速成長的生態系及網路社群，可以快速的開發原生套件，提供使用者良好的體驗。Flutter 在 2019 年的重點是將 Flutter 擴展到行動應用平臺之外，如網頁、桌面及嵌入式的平台上。
Quick Review — 什麼是 Dart？
Dart 是 Google 開發的程式語言，於2011年10月份釋出，可以被用於 WEB、伺服器、行動端或 IoT 等領域的開發。更詳細 Flutter 為何選擇 Dart 為程式語言的說明可參考 Why did Flutter choose to use Dart 有更詳細的說明。
Quick Review — 什麼是 Flutter for web？
Flutter for web 是 Flutter 為實現代碼兼容 (code-compatible) 的一個實作，項目之前的名稱為 Hummingbird，透過基於現有的技術標準 HTML/CSS 及 JavaScript ，自己製作渲染引擎，Flutter for web 開發者可以將使用 Dart 編寫的 Flutter 程式編譯至客戶端體驗 (client experience) 並且嵌入瀏覽器，部署至 Web。且可以使用 Flutter 現有的功能，且不需要其他瀏覽器的套件。
由 Flutter for web 的架構可知，為了增加在瀏覽器的支援與實作，Flutter 的核心是基於的 WEB API 的標準上透過綜合 DOM、Canvas 及 CSS 的技術繪製圖層，是以 Dart 程式語言完成，使用 Dart 優化過的 JavaScript 編譯器將 Flutter 框架核心與使用者的 .dart程式編譯成新的單一、簡化的應用程式，且可以部署到任何伺服器。，提供了可攜式、高品質且高性能的使用者體驗。完整說明可參考：https://flutter.dev/web
來一個 Flutter for web 的 Hello World 吧！
如果是全新的開發者請參考 Preset 步驟先安裝環境
Preset I — 安裝 Flutter 與 Dart
參考官網的安裝流程，根據開發者的作業系統有不同安裝跟設定的方式。參考網址：https://flutter.dev/docs/get-started/install
Preset II — 編輯器設定
官方也提供了Android studio/IntelliJ 及 VS Code 編輯器 Dart 及 Flutter 的擴充套件，如果已經安裝過 Flutter 的開發環境，則需要更新至 Flutter 1.5 版本。參考網址：https://flutter.dev/docs/get-started/editor?tab=vscode
$ flutter upgrade接著透過 flutter doctor 指令檢查開發環境。會得到類似下列的結果：
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale zh-Hant-TW)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.33.1)
[!] Connected device
! No devices available! Doctor found issues in 1 category.
接著需要安裝 webdev，Dart 的 command-line tool 編譯 .dart 程式。記得要先安裝 pub (Dart Package Manager) 及一定要設定環境變數 $Home/.pub-cache/bin 不然安裝webdev會出現錯誤。
如果是沒有 Dart 的環境，需要另行參考： Dart 安裝方式
設定完後執行安裝指令：
$ flutter packages pub global activate webdev
# or
$ pub global activate webdev建立專案
如果是使用 Visual Studio Code，可以將 VS code 上的 Dart 與 Flutter 擴充套件，更新至 3.0 版，增加了 Flutter：New Web Project 的 指令，讓我們可以自動建立 Flutter 的 web 專案。
Flutter 的專案名稱建議是以底線分開的命名規則，建立好的專案結構：
lib資料夾存放我們撰寫的 Dart 程式。main.dart是整個專案程式的進入點。web存放網頁的檔案，如果是在 App 的專案，則會有iOS及Android的資料夾。pubspec.yaml是紀錄專案的設定檔，類似於 Node.js NPM 的package.json或 PHP Composer 的composer.json。- 相關 asset 的設定（如：圖片、字型檔）檔案是放在
web資料夾內，也需要在pubspec.yaml寫相關的連結。 build資料夾則是放置程式編譯完成時產生的檔案。
執行專案
設定好專案、安裝好相關依賴後，接下來執行 webdev serve 。
$ webdev serve# or serve with hot reload
$ webdev serve --auto restart
打開瀏覽器 http://localhost:8080 就可以看到充滿 material design ？的 Flutter demo 網頁了！Hello World!
更多關於 webdev 的指令：https://github.com/dart-lang/webdev
最後使用打包的指令，最終檔案會編譯在 build 資料夾內。
$ webdev build如果不是透過 CLI 工具建立的專案，則需要建立下列檔案（範例程式參考 CLI 所建立之檔案內容）：
pubspec.yaml
lib/main.dart
web/index.html&web/main.dart
執行 pub get 安裝相關的 dependencies，並且會產生.dart_tool 資料夾存放及 lock 檔案 pubspec.lock（類似 Node.js 的 node_modules & package-lock.json）。
目前的一些技術限制
Flutter for web is currently available as a technical preview.
由於這個技術還在開發階段，所以還有以下問題。
- 目前還是沒有一個好的 debug tool。
- 瀏覽器支援度還不夠，建議先使用 chromium based 的瀏覽器。
- 正在整合的過程中，以後還是有可能需要大改程式碼。
- 由於目前還沒有辦法直接跟 App project 直接共用程式碼，Flutter API 與 Flutter for web 的 API 不相容，不過已經正在 merge。
- Flutter for web 的 dependencies 中使用的 UI SDK 與 App project 的不同。如：
flutter_web＆flutter_web_ui
https://github.com/flutter/flutter_web/blob/master/docs/faq.md
官方 Github 中也列了一份 Q&A 說明在現在實驗性質的專案可能遇到的問題，讓開發者在踩雷的時候 (?)，可以…認命點吧。
