內容

DartPad 是一個 開源工具,讓您可以在任何現代瀏覽器中使用 Dart 語言。本網站中的許多頁面,尤其是 程式碼實驗,都有 內嵌 DartPad。若要以獨立網頁開啟 DartPad,請前往 DartPad 網站 (dartpad.dev)

以下是 DartPad 設定為執行 Dart 時的樣子

Showcases what a Hello World app looks like in DartPad

函式庫支援

#

DartPad 支援標記為 多平台dart:* 核心函式庫。在撰寫 Flutter 應用程式時,DartPad 也支援 package:flutterdart:ui 函式庫。

DartPad 不支援 延遲載入,也不支援使用 pub.dev 套件儲存庫中的套件,除了 目前支援的套件

入門

#

若要熟悉 DartPad,請嘗試執行一些範例並建立一個簡單的命令列應用程式。

開啟 DartPad 並執行範例

#
  1. 前往 DartPad

    Dart 程式碼出現在左側,而輸出位置出現在右側。

  2. 使用頂端選單中的「範例」按鈕,選擇一個 Flutter 範例,例如 向日葵

    渲染後的輸出出現在右側。

建立命令列應用程式

#

若要建立一個簡單的命令列應用程式,請先建立一個新的片段

  1. 按一下「新增」按鈕,並確認您要捨棄對目前記事本的變更。

  2. 按一下有 Dart 標誌的項目。

  3. 變更程式碼。例如,變更 main() 函式,讓它包含以下程式碼

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

    當您輸入時,DartPad 會顯示提示、文件和自動完成建議。

  4. 按一下「格式化」按鈕。

    DartPad 使用 Dart 格式化程式 來確保您的程式碼具有適當的縮排、空白和換行。

  5. 執行您的應用程式。

  6. 如果您在輸入程式碼時沒有任何錯誤,請嘗試引入一個錯誤。

    例如,如果你將 split 改為 spit,你會在視窗的右下方看到警告。如果你執行應用程式,主控台中會出現編譯錯誤。

查看 Dart 版本資訊

#

DartPad 支援的語言功能和 API 取決於 DartPad 目前使用的 Dart SDK 版本。你可以在 DartPad 的右下方找到此 SDK 版本。

將 DartPad 嵌入網頁

#

你可以將 DartPad 嵌入網頁中,並自訂以符合你的使用案例。例如,非同步等待程式碼範例包含多個嵌入式 DartPad,標示為範例練習

有關嵌入 DartPad 的技術詳細資訊,請參閱 DartPad 嵌入指南