目录

DartPad 线上工具

DartPad 是一个可以让你在任何现代化的浏览器中体验 Dart 编程语言线上工具,它是 开源 的。本网页里一些页面,尤其是 codelabs 页面,包含了很多内嵌的 DartPads。你可以在浏览器里输入下面的网址打开一个 DartPad 页面。 DartPad 页面 (dartpad.cn).

DartPad 看起来是这样的:

Showcases what a Hello World app looks like in DartPad

可以在 DartPad 中使用的库

DartPad 支持标记为支持多平台以及 Web 平台的 dart:* 核心库。还支持在 Flutter 应用里使用 package:flutterdart:ui 库。

DartPad 尚不支持 延迟加载,除了 列举出的这些支持的 package 之外, DartPad 尚不支持使用其他在 pub.dev 上的 package。

DartPad 不支持 延迟加载 以及其他三方库。例如,DartPad 不支持使用 pub.dev 仓库中的 package。(对于 Package 的支持之后可能会有所变化,详情请关注[issue 901][]。)

开始体验

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

打开 DartPad 并运行一些示例

  1. 打开 DartPad

    Dart 示例代码会出现在左边,而代码运行后的输出则会出现在右边。

  2. 选择一个 Flutter 样例,例如 Sunflower,使用右上角的 样例 列表。

    它的输出会出现在右边输出框里。

</li> </ol>

创建一个命令行应用

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

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

  2. 点击 Dart logo,确保 HTML 支持已禁用,接着点击 Create

  3. 然后修改代码。比如将 main() 函数中的代码修改为如下:

    for (final char in 'hello'.split('')) {
      print(char);
    }
    

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

  4. 点击 Format 按钮。

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

  5. 运行你的应用。

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

    如果你将 split 写成 spit,你会在 DartPad 窗口的底部以及 Run 按钮上看到一些警告信息。如果你强行运行应用,你将会在控制台中看到一个异常。

检查 Dart 版本信息

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

网页中嵌入 DartPad

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

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

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