写一个迷你 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 应用示例开始，并修改
中没有<script>标签的部分。HTML and Dart connections 展示了完整的 HTML 代码。</p></blockquote><h3 class="pgc-h-arrow-right">如何安装</h3><p>为了开发Web，您需要<br/>Flutter 1.5及更高版本，它支持使用Flutter来定位Web，包括将Dart编译为JavaScript。要将<br/>Flutter SDK与flutter_web预览一起使用，请确保<br/>至少已从计算机上v1.5.4运行flutter upgrade，以将Flutter 升级至。</p><pre><code>$ flutter upgrade<br></code></pre><p>要安装该webdev软件包，该软件包提供了Flutter for web的构建工具，请运行以下命令：</p><pre><code>$ flutter packages pub global activate webdev<br></code></pre><p>确保$HOME/.pub-cache/bin目录在您的路径中，然后您<br/>可以webdev直接在终端上使用该命令。</p><p>为了添加$HOME/.pub-cache/bin到路径中，请<br/>从终端运行以下提到的命令来打开路径文件。</p><pre><code>$ touch ~/.bash_profile; open ~/.bash_profile<br></code></pre><p>它将使用TextEdit打开文件，确保对PATH中的所有组件都有引用并保存。如果再次打开它，则会找到您的修改。</p><pre><code>flutter sdk:<br>export PATH=$PATH:[Path to your flutter directory]/flutter/bin<br><br>dart sdk:<br>export PATH=$PATH:[Path to your flutter directory]<br>/flutter/bin/cache/dart-sdk/bin<br><br>webdev:<br>mac: export PATH=$PATH:$HOME/.pub-cache/bin<br>windows: %USERPROFILE%\\AppData\\Roaming\\Pub\\Cache\\bin<br>linux: $HOME/flutter/.pub-cache/bin<br></code></pre><blockquote><p>注意：如果您在配置webdev直接运行时遇到问题，请尝试：<br/>flutter packages pub global run webdev [command]。</p></blockquote><p>现在我们已经完成了开发环境的设置，让我们继续进行创建Web项目的下一步。</p><h3 class="pgc-h-arrow-right">Flutter Web开发的工具支持</h3><p>完成环境设置后，您将需要一个IDE才能开始<br/>为Web开发。选择您喜欢的IDE，然后按照<br/>下面的逐步说明进行操作：</p><h4 class="pgc-h-arrow-right">Visual Studio程式码</h4><p>Visual Studio Code通过<br/>Flutter扩展的v3.0版本支持Flutter Web开发。</p><ul class=""><li>安装 Flutter SDK</li><li>设置 VS Code</li><li>配置VS代码以指向本地Flutter SDK</li><li>Flutter: New Web Project从VS Code 运行命令</li><li>创建项目后，按F5或“ Debug-> Start<br/>Debugging” 运行您的应用</li><li>VS Code将使用webdev命令行工具来构建和运行您的应用程序；应打开一个新的Chrome窗口，显示正在运行的应用</li></ul><h4 class="pgc-h-arrow-right">从IntelliJ使用</h4><ul class=""><li>安装 Flutter SDK</li><li>设置您的IntelliJ或Android Studio副本</li><li>配置IntelliJ或Android Studio以指向本地Flutter SDK</li><li>创建一个新的Dart项目；请注意，对于Flutter for Web应用，您<br/>要从Dart项目向导而不是Flutter项目向导开始</li><li>从Dart项目向导中，为<br/>应用程序模板选择“ Flutter for web”选项</li><li>创建项目；pub get将自动运行</li><li>创建项目后，点击run主工具栏上的按钮</li><li>IntelliJ将使用webdev命令行工具来构建和运行您的应用程序；<br/>应打开一个新的Chrome窗口，显示正在运行的应用</li></ul><h4 class="pgc-h-arrow-right">使用Android Studio</h4><p>在Android Studio中，没有直接的插件或模板来创建Web项目，而是可以使用Stagehand软件包来帮助您设置Web项目。Stagehand基本上是Dart项目脚手架生成器，受到Web Starter Kit和Yeoman等工具的启发。为了使用Stagehand创建一个Web项目，您需要按照以下说明进行操作：</p><ul class=""><li>安装 Flutter SDK</li><li>设置您的Android Studio副本</li><li>配置Android Studio以指向您的本地Flutter SDK</li><li>现在从终端运行以下命令以安装Stagehand $ pub global activate stagehand</li><li>一旦安装了Stagehand，就可以使用它<br/>在所需目录中生成项目框架。例如，以下是如何使用Stagehand创建简单的Web项目：</li></ul><pre><code>$ mkdir flutter_web_project <br>$ cd flutter_web_project <br>$ stagehand web-simple<br></code></pre><p>并列出所有项目模板：</p><p>$ stagehand</p><ul class=""><li>创建项目后，请在Android Studio中打开该项目，然后<br/>在pubspec.yaml文件中添加以下依赖项</li></ul><pre><code> dependencies:<br> flutter_web: any<br> flutter_web_ui: any<br> dev_dependencies:<br> # Enables the `pub run build_runner` command<br> build_runner: ^1.1.2<br> # Includes the JavaScript compilers<br> build_web_compilers: ^1.0.0<br> # flutter_web packages are not published to pub.dartlang.org<br> # These overrides tell the package tools to get them from GitHub<br> dependency_overrides:<br> flutter_web:<br> git:<br> url: https://github.com/flutter/flutter_web<br> path: packages/flutter_web<br> flutter_web_ui:<br> git:<br> url: https://github.com/flutter/flutter_web<br> path: packages/flutter_web_ui<br></code></pre><ul class=""><li>pub get从您的终端运行，这将下载所有必需的软件包</li><li>一旦完成 lib在项目的根目录中创建一个文件夹</li><li>现在main.dart在lib文件夹中创建一个文件，并将以下代码粘贴到其中：</li></ul><pre><code>import 'package:flutter_web/material.dart';<br><br>void main() => runApp(Text('Hello World', textDirection:<br> TextDirection.ltr));<br></code></pre><ul class=""><li>完成后；打开main.dartWeb文件夹中存在的文件，并在其中粘贴以下代码：</li></ul><pre><code>import 'package:fancy_proj/main.dart' as app;<br>import 'package:flutter_web_ui/ui.dart' as ui;<br><br>main() async {<br> await ui.webOnlyInitializePlatform();<br> app.main();<br>}<br></code></pre><ul class=""><li>完成所有操作后，就可以测试Web项目了。通过在终端中键入以下命令来运行您的应用程序：</li></ul><pre><code>$ webdev serve<br><br>[INFO] Generating build>閱讀更多 技術剛剛好 的文章
