目录

Contents

DartPad 线上工具

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

DartPad is an open-source tool that lets you play with the Dart language in any modern browser.

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

Many pages in this site — especially codelabs — have embedded DartPads. To get a DartPad as big as your browser window, go to the DartPad site (dartpad.dev).

DartPad 看起来是这样的:

Here’s what DartPad looks like:

DartPad Hello World

可以在 DartPad 中使用的库

Library support

DartPad 支持标记为支持多平台以及 web 平台的 dart:* 核心库。不支持原生平台的库,也不支持 延迟加载

DartPad supports dart:* core libraries marked as multi-platform and web platform. It doesn’t support those marked native platform, and it doesn’t support deferred loading.

它也不支持使用 pub.dev 中的三方库。

It also doesn’t support using packages from the pub.dev package repository.

开始体验

Getting started

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

To get familiar with DartPad, try running some samples and then creating a simple command-line app.

打开 DartPad 并运行一些示例

Open DartPad, and run a sample

  1. Go to DartPad.

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

    Dart code appears on the left, and a place for the output appears on the right.

  2. Choose a Flutter sample such as Sunflower, using the Samples list at the upper right.

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

    The rendered output appears to the right.

创建一个命令行应用

Create a command-line app

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

To create a simple command-line app, use New Pad.

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

    Click the New Pad button, and confirm that you want to discard changes to the current pad.

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

    Click the Dart logo, make sure that HTML support is disabled, and then click Create.

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

    Change the code. For example, change the main() function to contain this code:

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

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

    As you type, DartPad shows hints, documentation, and autocomplete suggestions.

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

    Click the Format button. DartPad uses the Dart formatter to ensure that your code has proper indentation, white space, and line wrapping.

  5. 运行你的应用。

    Run your app.

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

    If you didn’t happen to have any bugs while you were entering the code, try introducing a bug.

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

    For example, if you change split to spit, you get warnings at the bottom right of the window. If you run the app, a compilation error appears in the console.

检查 Dart 版本信息

Checking Dart version info

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

The language features and APIs that DartPad supports depend on the Dart SDK version that DartPad is based on. You can find the SDK version at the bottom right of DartPad.

网页中嵌入 DartPad

Embedding DartPad in web pages

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

You can embed DartPad inside of web pages, customizing it to suit your use case. For example, the futures codelab contains multiple embedded DartPads labeled as examples and exercises.

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

For more information about how to use embedded DartPads, see best practices for using DartPad in tutorials.

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

For technical details on embedding DartPads, see the DartPad embedding guide.