目录

DartPad 线上工具

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

DartPad 看起来是这样的:

Showcases what a Hello World app looks like in DartPad

可以在 DartPad 中使用的库

#

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

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

开始体验

#

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

打开 DartPad 并运行一些示例

#
  1. 打开 DartPad

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

  2. 选择一个 Flutter 样例,例如 Sunflower,使用顶部菜单中的 样例 (Samples) 按钮。

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

创建一个命令行应用

#

要创建一个简单的命令行应用,首先要创建一个新的片段:

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

  2. 点击带有 Dart logo 的项 (Dart snippet)。

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

    dart
    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 嵌入指南。