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插件时,单击“ 是”。
- 出现提示时,单击重新启动。
- 安装Android Studio
-
配置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文件中添加以下依赖项
运行pub get,将下载所有必需的软件包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
lib在项目的根目录中创建一个文件夹
现在main.dart在lib文件夹中创建一个文件,并将以下代码粘贴到其中:
完成后;打开main.dartWeb文件夹中存在的文件,并在其中粘贴以下代码:import 'package:flutter_web/material.dart'; void main() => runApp(Text('Hello World', textDirection: TextDirection.ltr));
完成所有操作后,就可以测试Web项目了。通过在终端中键入以下命令来运行您的应用程序:import 'package:fancy_proj/main.dart' as app; import 'package:flutter_web_ui/ui.dart' as ui; main() async { await ui.webOnlyInitializePlatform(); app.main(); }
在Chrome中打开http:// localhost:8080,您应该Hello World在左上角看到红色文本。$ 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
获取(无状态)热重载 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动画和游戏的起点。