目錄

DartPad 線上工具

DartPad 是一個可以讓你在任何現代化的瀏覽器中體驗 Dart 程式語言線上工具,它是 開源 的。本網頁裡一些頁面,尤其是 codelabs 頁面,包含了很多內嵌的 DartPads。你可以在瀏覽器裡輸入下面的網址開啟一個 DartPad 頁面。 DartPad 頁面 (dartpad.dev).

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