Dart 官方开源的在线编辑器,还能跑 Flutter
❝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