Flutter For Web 创建和运行Web应用程序

Flutter 汇总请看这里

Flutter于2017年5月在Google I / O上首次使用Alpha工具包发布，并于2018年在Google I / O上发布，最终通过未来的新产品HummingBird达到1.0版，并于2019年5月7日在Google IO 2019上，谷歌终于宣布推出Flutter for Web预览版。

Flutter的创建旨在为开发人员提供快速的开发框架，并为用户提供出色的参与和快速体验。Flutter for Web是Flutter的代码兼容实现，使用基于标准的Web技术（HTML，CSS和JavaScript）呈现。借助Flutter for Web，可以将Dart编写的现有Flutter代码编译为可嵌入到浏览器中并部署到任何Web服务器的客户端。可以使用Flutter的所有功能，并且不需要浏览器插件。

安装

升级Flutter至指定版本

为了开发web，需要Flutter 1.5及以上版本，它支持使用Flutter来定位web，包括将Dart编译成JavaScript。使用Flutter SDK与flutter_web预览，确保已经通过flutter upgrade升级Flutter至v1.5.4

$ flutter upgrade

安装Flutter for web构建工具

要安装该webdev软件包，该软件包提供了Flutter for web的构建工具，请运行以下命令：

$ flutter packages pub global activate webdev

配置环境变量

$ touch ~/.bash_profile; open ~/.bash_profile

将使用TextEdit打开文件，确保对PATH中的所有组件都有引用并保存。

确保配置了$HOME/.pub-cache/bin环境变量，然后可以直接在
终端上使用webdev命令。

flutter sdk:
export PATH=$PATH:[Path to your flutter directory]/flutter/bin

dart sdk:
export PATH=$PATH:[Path to your flutter directory]
/flutter/bin/cache/dart-sdk/bin

webdev:
mac: export PATH=$PATH:$HOME/.pub-cache/bin
windows: %USERPROFILE%\AppData\Roaming\Pub\Cache\bin
linux: $HOME/flutter/.pub-cache/bin

如果在配置webdev直接运行时遇到问题，请尝试：
flutter packages pub global run webdev [command]。

准备 IDE

完成环境设置后，需要一个IDE 为Web开发。选择您喜欢的IDE，然后按照
下面的逐步说明进行操作：

Visual Studio Code

Visual Studio Code通过Flutter v3.0版本支持Flutter Web开发。

• 安装 Flutter SDK
• 配置 VS Code
  • VS Code，下载安装最新稳定版本
  • 安装Flutter和Dart插件
    • 启动VS Code。
    • 调用View > Command Palette….
    • 键入“install”，然后选择Extensions: Install Extensions。
    • 在Extensions搜索字段中输入“ flutter”，在列表中选择Flutter，然后单击Install。这还将安装所需的Dart插件。
  • 使用Flutter Doctor验证
    • 调用 View > Command Palette….
    • 键入“ doctor”，然后选择Flutter: Run Flutter Doctor.
    • 查看“输出” 窗格中的输出是否有问题。
• 配置VS Code指向本地Flutter SDK
• 从VS Code 运行命令 Flutter: New Web Project
• 创建项目后，按F5或“ Debug-> Start Debugging” 运行您的应用
• VS Code将使用webdev命令行工具来构建和运行您的应用程序；应打开一个新的Chrome窗口，显示正在运行的应用

IntelliJ

• 安装 Flutter SDK

• 配置IntelliJ或Android Studio

  • 安装Android Studio
    Android Studio为Flutter提供了完整的集成IDE体
    • Android Studio版本3.0或更高版本
  • 或者，您也可以使用IntelliJ：
    • IntelliJ IDEA社区 2017.1版或更高版本
    • IntelliJ IDEA Ultimate版本2017.1或更高版本
  • 安装Flutter和Dart插件
    • 启动Android Studio。
    • 打开插件首选项（在macOS上为Preferences > Plugins ， 在Windows和Linux上为File > Settings > Plugins）。
    • 选择Marketplace，选择Flutter插件，然后单击 Install。
    • 当提示您安装Dart插件时，单击“ 是”。
    • 出现提示时，单击重新启动。

• 配置IntelliJ或Android Studio以指向本地Flutter SDK

• 创建一个新的Dart项目；请注意，对于Flutter for Web应用，您要从Dart项目向导而不是Flutter项目向导开始

• 从Dart项目向导中，为应用程序模板选择“ Flutter for web”选项

• 创建项目；pub get将自动运行

• 创建项目后，点击run主工具栏上的按钮

• IntelliJ将使用webdev命令行工具来构建和运行您的应用程序；打开一个新的Chrome窗口，显示正在运行的应用

Android Studio

在Android Studio中，没有直接的插件或模板来创建Web项目，而是可以使用Stagehand软件包来帮助您设置Web项目。Stagehand基本上是Dart项目脚手架生成器，受到Web Starter Kit和Yeoman等工具的启发。为了使用Stagehand创建一个Web项目，您需要按照以下说明进行操作：

• 安装 Flutter SDK
• 设置您的Android Studio
  • 同IntelliJ
• 配置Android Studio以指向您的本地Flutter SDK
  现在从终端运行以下命令以安装Stagehand $ pub global activate stagehand
  安装了Stagehand，就可以使用它在所需目录中生成项目框架。例如，以下是如何使用Stagehand创建简单的Web项目：

  $ mkdir flutter_web_project  
  $ cd flutter_web_project  
  $ stagehand web-simple
  

  列出所有项目模板：
  $ stagehand
  - 创建项目后，请在Android Studio中打开该项目，然后在pubspec.yaml文件中添加以下依赖项

  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
  

  运行pub get，将下载所有必需的软件包
  lib在项目的根目录中创建一个文件夹
  现在main.dart在lib文件夹中创建一个文件，并将以下代码粘贴到其中：

  import 'package:flutter_web/material.dart';
  
  void main() => runApp(Text('Hello World', textDirection:
  TextDirection.ltr));
  

  完成后；打开main.dartWeb文件夹中存在的文件，并在其中粘贴以下代码：

  import 'package:fancy_proj/main.dart' as app;
  import 'package:flutter_web_ui/ui.dart' as ui;
  
  main() async {
    await ui.webOnlyInitializePlatform();
    app.main();
  }
  

  完成所有操作后，就可以测试Web项目了。通过在终端中键入以下命令来运行您的应用程序：

  $ webdev serve
  
  [INFO] Generating build script completed, took 331ms
  ...
  [INFO] Building new asset graph completed, took 1.4s
  ...
  [INFO] Running build completed, took 27.9s
  ...
  [INFO] Succeeded after 28.1s with 618 outputs (3233 actions)
  Serving `web` on http://localhost:8080
  

  在Chrome中打开http：// localhost：8080，您应该Hello World在左上角看到红色文本。

获取（无状态）热重载 webdev

要webdev与热重装一起使用，请在项目目录中运行以下命令：

$ webdev serve --auto restart

您会注意到类似flutter packages pub run build_runner serve的输出，现在更改应用程序代码将导致保存时快速刷新应用程序。

注意：该–hot-reload选项并不完美。如果发现
异常行为，则可能需要手动刷新页面。

注意：该–hot-reload选项当前为“无状态”。
重新加载时，应用程序状态将丢失。我们确实希望在Web上提供“有状态的”热重装-还暂时不支持

Stagehand模板

Stagehand有许多可用的模板，下面列出了所有项目模板：

• console-full -命令行应用程序示例。
• package-simple -Dart库或应用程序的起点。
• server-shelf -使用机架软件包构建的Web服务器。
• web-angular -带有材料设计组件的Web应用程序。
• web-simple -仅使用核心Dart库的网络应用。
• web-stagexl -2D动画和游戏的起点。