Dart 官方开源的在线编辑器，还能跑 Flutter

小半 • 2024年2月23日下午10:22 • 开源速递 • 阅读 363

❝

DartPad

地址：https://github.com/dart-lang/dart-pad

⭐️：1.3k

语言：Dart

官网：https://dartpad.dev/

❞

DartPad 是一个免费的开源在线编辑器，可帮助开发人员了解 Dart 和 Flutter。

DartPad 最初是由 Dart 工具团队于 2015 年构建的 Dart 语言在线 Playground。它可以编译、分析和显示 Dart 代码的结果，并且可以作为 iframe 嵌入到其他网站中。

在 2019 年 12 月，Dart 工具团队推出了新版本的 DartPad (dartpad.dev)，让这个工具有了全新的外观和对流行的 Flutter UI 工具包的支持。可以直接在浏览器中运行 Dart 程序，还可以运行 Flutter 应用程序。

创建新项目

要用 DartPad 创建一个新的 Flutter 项目，可以打开 https://dartpad.dev/ 页面，然后单击顶部的 New Pad 按钮并选择 Flutter。

编辑器中会有一些启动代码，我们可以运行它。当 DartPad 看到我们在使用 package:flutter 时，就会出现一个面板来显示 UI。也可以使用右上角的 Samples 菜单查找 Flutter 示例。

DartPad 的特点

Flutter 的所有核心库，例如 cupertino 和 material 都可以使用，并且 DartPad 可以显示它们的文档。选择一个符号以查看底部面板中的文档。

DartPad 使用 Dart 格式化程序 (dartfmt) 格式化代码，并且提供帮助文档，提供修复，建议自动完成，并显示错误和警告。

当我们准备好分享代码片段时，可以创建一个 GitHub gist 并将 gist ID 放在如下 URL 中：https://dartpad.dev/<GistID>。我们可以在 bug report、StackOverflow 或其它一些社交媒体平台上共享此链接。

我们也可以将 DartPad 嵌入到页面中，就像在这个 https://docs.flutter.dev/codelabs/layout-basics 这个页面中一样。嵌入式 DartPads 特别适合用于文章、代码实验室和教程。具体的操作指南可以参考 https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide