2、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
      }
    ]
  }
]
复制代码