Flutter在Web前端开发的崛起与挑战

发表时间: 2020-01-03 09:30

写一个迷你 Dart 应用

要点有哪些？ DartPad 让你不需要 HTML 引用编写一个简单的 Dart web 应用。一个 Dart 应用包括 Dart、HTML、和（通常）CSS 代码。编译一个 web 应用的 Dart 代码为 JavaScript 来在任意现代浏览器中运行此应用。 HTML 文件管理浏览器页面中的 Dart 代码。树/节点的 DOM 结构，模拟浏览器页面。使用带 ID 的 querySelector() 来从 DOM 获取元素。 CSS 选择器用来选择匹配 DOM 中的元素。使用 CSS 规则来给元素添加样式。

本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

要写一个 Dart web 应用，你需要明白几个概念——DOM 树、节点、元素、HTML，以及 Dart 语言和库。

这些概念是相互依赖的，但我们必须从某个地方开始，所以我们从一个简单的 HTML 文件开始，它介绍了 DOM 树和节点。从那里，你构建一个视图框架，从 Dart 应用剥离动态生成页面的代码。

虽然简单，但这个例子展示了如何连接 Dart 应用和 HTML 页面，以及一个 Dart 应用如何与页面上的元素相互作用。这些概念为更有趣、更有用的 web 应用提供了基础。

关于 Dart, HTML, 以及 CSS

如果你用过 DartPad，你已经看到了让你编写 web 应用代码的 DART、HTML 和 CSS 标签。这三个语言分别负责 web 应用的不同方面。

语言用途 Dart 实现 web 应用的交互和动态行为 HTML 描述 web 应用页面的内容（文档和结构中的元素） CSS 控制页面元素的外观

Dart 程序可以响应事件，例如鼠标点击，动态地操作 web 页面上的元素，以及保存信息。在 web 应用被部署之前，Dart 代码必须被编译为 JavaScript 代码。

HTML 是一种描述 web 页面的语言。它使用标签设置页面的初始结构，为页面添加元素，并为页面交互嵌入任意脚本。HTML 设置初始的文档树，并指定元素类型、CSS 类和 ID，这些允许 HTML、CSS 和 Dart 程序来引用相同的元素。

CSS 表示层叠样式表(Cascading Style Sheets)，描述了文档中元素的外观。CSS 控制格式的许多方面，例如：字体、字号、颜色、背景色、边框、外边距，以及对齐。

创建一个新的 Dart 应用

进入 DartPad。
点击 New Pad 按钮，撤销你上次在 DartPad 做的所有更改。

注意：这些 DartPad 的功能隐藏了一些 HTML 引用代码。如果你想要使用任何其它的编辑器，我们推荐从一个小的 Dart web 应用示例开始，并修改<body>中没有<script>标签的部分。HTML and Dart connections 展示了完整的 HTML 代码。

如何安装

为了开发Web，您需要
Flutter 1.5及更高版本，它支持使用Flutter来定位Web，包括将Dart编译为JavaScript。要将
Flutter SDK与flutter_web预览一起使用，请确保
至少已从计算机上v1.5.4运行flutter upgrade，以将Flutter 升级至。

$ flutter upgrade

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

$ flutter packages pub global activate webdev

确保$HOME/.pub-cache/bin目录在您的路径中，然后您
可以webdev直接在终端上使用该命令。

为了添加$HOME/.pub-cache/bin到路径中，请
从终端运行以下提到的命令来打开路径文件。

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

它将使用TextEdit打开文件，确保对PATH中的所有组件都有引用并保存。如果再次打开它，则会找到您的修改。

flutter sdk:export PATH=$PATH:[Path to your flutter directory]/flutter/bindart sdk:export PATH=$PATH:[Path to your flutter directory]/flutter/bin/cache/dart-sdk/binwebdev:mac: export PATH=$PATH:$HOME/.pub-cache/binwindows: %USERPROFILE%\AppData\Roaming\Pub\Cache\binlinux: $HOME/flutter/.pub-cache/bin

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

现在我们已经完成了开发环境的设置，让我们继续进行创建Web项目的下一步。

Flutter Web开发的工具支持

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

Visual Studio程式码

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

安装 Flutter SDK
设置 VS Code
配置VS代码以指向本地Flutter SDK
Flutter: New Web Project从VS Code 运行命令
创建项目后，按F5或“ Debug-> Start
Debugging” 运行您的应用
VS Code将使用webdev命令行工具来构建和运行您的应用程序；应打开一个新的Chrome窗口，显示正在运行的应用

从IntelliJ使用

安装 Flutter SDK
设置您的IntelliJ或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副本
配置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在左上角看到红色文本。
谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。