二、Flutter Multiplatform - Web;

Flutter for web

  Flutter for web是Flutter的框架的兼容實現，使用HTML，CSS和JavaScript等基於標準的Web技術呈現。

   結合使用DOM，Canvas和CSS，Flutter可以在現代瀏覽器中提供便攜，高質量的web體驗。 Flutter在Dart中徹底實現了核心繪圖層，並使用Dart優化的JavaScript編譯器將Flutter核心和框架與應用程序一塊兒編譯成一個能夠部署到任何Web服務器的簡化源文件。

   在官方的介紹中，在早期的開發階段，Flutter for web將會實現不少場景:

• 使用Flutter構建漸進式Web應用程序。 對Flutter的Web支持使現有的基於移動的應用程序能夠打包爲PWA，以支持更普遍的設備，或爲現有應用程序提供配套的Web體驗。
• 嵌入式Web內容。 Flutter爲建立豐富的，以數據爲中心的組件提供了一個強大的環境，能夠輕鬆地在現有網頁中託管。 不管是數據可視化，在線工具如汽車配置器仍是嵌入式圖表，Flutter均可覺得嵌入式Web內容提供高效的開發方法。
• 在Flutter移動應用中嵌入Web內容。 在現有移動應用程序內提供動態內容更新的既定方法是使用Web視圖控件，其能夠動態地加載和顯示信息。 Flutter將支持如今提供統一的Web和移動內容環境，能夠在線部署內容或嵌入應用程序而無需重寫。

  總而言之其目標是將Web支持做爲Flutter SDK中的與iOS和Android一致的第一級別平臺。 Flutter for web是實現該目標的跳板，提供實現幾乎整個Flutter API的純Web包。

預覽版注意事項

• Flutter Team正在Flutter repo的分支中開發Flutter for web。 這樣能夠實現快速迭代，同時保持核心Flutter repo穩定。
• Flutter Team已經開始將Web代碼合併到核心存儲庫中。 最終，將擁有一個SDK/Framework，其中包含一組適用於全部平臺的Widget。
• Flutter小部件API與移動小部件API相同，它們只是單獨臨時打包的。

代碼倉庫

  要想體驗Flutter for web能夠克隆其倉庫進行體驗。

預覽版限制

Flutter team將打算在現代瀏覽器中徹底支持Flutter的全部API和功能。 可是，在此預覽版本彙總，有許多例外狀況:

• flutter_web尚未插件系統。 咱們暫時提供對dart:html，dart:js，dart:svg，dart:indexed_db以及其餘容許訪問絕大多數瀏覽器API的Web庫的訪問。 可是，將來這些庫將被不一樣的插件API替換。
• 並不是全部Flutter API都在Flutter for web上實現。
• 性能優化工做纔剛剛開始。 Flutter for web生成的代碼可能運行緩慢，或者會出現UI卡頓。
• 目前，桌面UI交互並不徹底。
• 開發工做流程目前僅適用於Chrome。

瀏覽器支持

  Flutter for web 提供了:

1. 生產階段的javascript編譯器：用於生成優化的代碼以進行部署。
2. 測試階段的javascript編譯器：提供增量編譯和熱重啓。

  使用生產階段的編譯器構建時，將支持Chromium的瀏覽器和Safari。還旨在全面支持Firefox和Edge做爲目標平臺，但測試覆蓋率在這些瀏覽器上仍然很低。 Flutter team的目的是支持當前和最後兩個主要版本。未計劃對Internet Explorer的支持。

  開發階段的編譯器目前僅支持Chrome。

測試Flutter for web

  Flutter 1.5及更高版本才能支持使用Flutter for Web，包括將Dart編譯爲JavaScript。 要將Flutter SDK與flutter_web預覽一塊兒使用，請確保flutter upgrade將Flutter升級到至少v1.5.4。

• 克隆flutter_web源代碼

• 安裝flutter_web構建工具

  flutter pub global activate webdev
  複製代碼

  確保$HOME/.pub-cache/bin目錄位於系統路徑中，而後能夠直接從終端使用webdev命令。

  注意：若是在配置webdev以直接運行時遇到問題，請嘗試：flutter pub global run webdev [command]。

• 運行demo

  該demo在存儲庫中的examples/hello_world中

  • Update packages

  flutter packages upgrade
  複製代碼

  • 在本地構建並顯示demo

    webdev serve
    複製代碼

  在Chrome中打開http://localhost:8080，能夠在左上角看到紅色文字的Hello World。

使用git中的flutter_web包

若是想在不克隆存儲庫的狀況下依賴flutter_web軟件包，能夠按以下方式設置pubspec：

name: my_flutter_web_app

environment:
  sdk: '>=2.2.0 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  # Enables the `pub run build_runner` command
  build_runner: ^1.1.2
  # Includes the JavaScript compilers
  build_web_compilers: ^1.0.0

# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
複製代碼

使用webdev獲取(stateless)的熱重載

要使用熱重載,使用webdev，在項目目錄中運行如下命令:

webdev serve --auto restart
複製代碼

你會注意到flutter pub run build_runner服務的相似輸出，但如今更改應用程序代碼會致使在保存時快速刷新應用程序。

注意：--hot-reload選項並不完美。 若是發現意外行爲，則可能須要手動刷新頁面。

使用生產階段的JavaScript編譯器構建

  上面介紹的（可與build_runner和webdev一塊兒使用）使用Dart Dev Compiler的工做流程，該編譯器專爲快速，增量編譯和輕鬆調試而設計。

  若是想評估生產階段的性能，瀏覽器兼容性和代碼大小等，能夠啓用發佈編譯器dart2js。

• 要啓用發佈編譯器，傳入--release標誌(或只是-r)。

webdev serve -r
複製代碼

注意：此配置的構建可能會很慢。

• 若是想生成輸出到磁盤，建議使用webdev。

webdev build
複製代碼

  這將建立一個包含index.html，main.dart.js的構建目錄以及使用靜態HTTP服務器運行應用程序所需的其他文件。 要優化輸出JavaScript，可使用項目根目錄中的build.yaml文件啓用優化標誌，其中包含如下內容：

# See https://github.com/dart-lang/build/tree/master/build_web_compilers#configuration
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        generate_for:
        - web/**.dart
        options:
          dart2js_args:
            - --no-source-maps
            - -O4
複製代碼

注意：-O4選項啓用了許多高級優化，這些優化可能會致使未通過全面測試的代碼中出現運行時錯誤。

遷移到現有代碼中

  爲了進行實驗，Flutter for web是在一個單獨的命名空間中開發的。 所以，截至目前，現有的移動Flutter應用程序沒法在不進行更改的狀況下在Web上運行。

  若是正在使用Git，建議暫時在項目存儲庫中建立特定於Web的分支。

pubspec.yaml文件

name: my_app

version: 1.0.0

dependencies:
  ## REPLACE
  ## Update your dependencies to use `flutter_web`
  #flutter:
  #  sdk: flutter
  flutter_web: any

dev_dependencies:
  ## REPLACE
  ## Same goes for test packages
  #flutter_test:
  #  sdk: flutter
  flutter_web_test: any

  ## ADD
  ## Add these dependencies to enable the Dart web build system
  build_runner: ^1.2.2
  build_web_compilers: ^1.1.0

  test: ^1.3.4

## REMOVE
## For the preview, assets are handled differently. Remove or comment
## out this section. See `Assets` below for more details
# flutter:
#   uses-material-design: true
#   assets:
#     - asset/
#
#   fonts:
#   - family: Plaster
#     fonts:
#     - asset: asset/fonts/plaster/Plaster-Regular.ttf

## ADD
## flutter_web packages are not published to pub.dartlang.org
## These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test
複製代碼

lib/

  將package:flutter更改成package:flutter_web。

  將dart:ui更改成package:flutter_web_ui:ui.dart。

web/

  須要建立

• web/index.html 和 web/main.dart

這些文件爲應用程序提供了一個入口點。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
複製代碼

import 'package:flutter_web_ui/ui.dart' as ui;

// TODO: change `my_app` to refer to your app package name.
import 'package:my_app/main.dart' as app;

main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
複製代碼

• web/assets (可選)

  若是應用程序有assets，則它們必須位於web/assets目錄中。可能還須要更新源代碼中引用這些assets的路徑。

• web/assets/FontManifest.json (可選)

  若是應用程序具備自定義字體，則須要將其包含在此文件中。

[
  {
    "family": "Raleway",
    "fonts": [
      {
        "asset": "fonts/Raleway-Regular.ttf"
      },
      {
        "asset": "fonts/Raleway-Italic.ttf",
        "style": "italic"
      }
    ]
  },
  {
    "family": "RobotoMono",
    "fonts": [
      {
        "asset": "fonts/RobotoMono-Regular.ttf"
      },
      {
        "asset": "fonts/RobotoMono-Bold.ttf",
        "weight": 700
      }
    ]
  }
]
複製代碼