DartPad 线上工具

DartPad 是一个可以让你在任何现代化的浏览器中体验 Dart 编程语言线上工具，它是开源的。

本网页里一些页面，尤其是 codelabs 页面，包含了很多内嵌的 DartPads。你可以在浏览器里输入下面的网址打开一个 DartPad 页面。DartPad 页面 (dartpad.cn).

小提示:

如果你在中国，请尝试使用 dartpad.cn。

如果你在使用 DartPad 的过程中有任何的问题，请查阅 DartPad 常见问题页面。

DartPad 看起来是这样的：

DartPad Hello World

可以在 DartPad 中使用的库

DartPad 支持 Web 应用所使用的dart:* 库；但不支持 dart:io 库以及从 Package 中导入库。如果你想要使用 dart:io，请使用 Dart SDK 替代。如果你想要使用某个 Package，则获取该 Package 支持的 平台 的 SDK。

开始体验

为了可以尽快熟悉 DartPad，你可以尝试在 DartPad 中运行一些示例，然后在 DartPad 中创建一个简单的命令行应用。

打开 DartPad 并运行一些示例

一个示例代码会出现在左边而代码运行后的输出则会出现在右边。如果你之前使用过 DartPad，你可以点击 New Pad 打开最原始的那个示例代码。

  • 点击 Run.

示例代码就会开始/重新运行并显示/更新输出。

  • 你可以使用右上方的 Samples 按钮从下拉列表中选择一个 HTML 示例，比如 Sunflower。

在你点击选择示例后，它的输出会出现在右边输出框里。默认情况下，你看到的 HTML 输出与你将会在浏览器中看到的一致。

  • 点击 CONSOLE 你则会看到示例代码的控制台输出。

  • 在左边的边框中，点击 HTML 标签可以查看示例代码的 HTML 标记符。

创建一个命令行应用

使用 New Pad 来创建一个简单的命令行应用。

  • 点击 New Pad 按钮并确认你想放弃当前 Pad 中的修改。

然后默认的 Hello World 示例代码就会出现在 DART 标签下。

  • 取消勾选位于 DartPad 右下方的 Show web content 复选框。

HTML 和 CSS 标签就会被隐藏。

  • 然后修改代码。比如将 main() 函数中的代码修改为如下：
  1. for (var char in 'hello'.split('')) {
  2.   print(char);
  3. }

在你输入的时候，DartPad 会显示提示、文档以及自动完成建议。

  • 点击 Format 按钮。 DartPad 会使用 Dart 格式化器 来格式化你的代码以确保有合适的缩进、空格和换行。

  • 运行你的应用。

  • 如果你写的代码没有显示任何 BUG，那么请尝试自行写出一个 BUG。

例如，如果你将 split 写成 spit，你会在 DartPad 窗口的底部以及 Run 按钮上看到一些警告信息。如果你强行运行应用，你将会在输出中看到一个未捕获的异常。

检查 Dart 版本信息

DartPad 支持的语言功能和 API 取决于 DartPad 使用的 Dart SDK 版本。你可以在 DartPad 的右下方找到其所使用的 SDK 版本。

网页中嵌入 DartPad

你可以将 DartPad 嵌入到网页中，根据你的用途对其进行自定义。例如 futures codelab 包含了多个嵌入的 DartPads并把它们用作 examples 和 exercises。

更多有关如何使用嵌入式 DartPads 的相关信息，参见使用 DartPad 的最佳实践指南。

有关嵌入式 DartPads 的具体技术细节，参见 DartPad 嵌入指南。