如何通过 DartPad 制作 Dart 代码实践教程？

本文共计620个文字，预计阅读时间需要3分钟。

DartPad是一个开源的在线编辑器，可在浏览器中体验和运行Dart编程语言，旨在帮助开发者更好地理解Dart语言及Flutter应用开发。该项目始于2015年，最初仅作为一个简单的在线工具。

DartPad 是一个开源的、在浏览器中体验和运行 Dart 编程语言的线上编辑器，目标是为了帮助开发者更好地了解 Dart 编程语言以及 Flutter 应用开发。

DartPad 项目起始于 2015 年，最初只是一个在线的编译器，可以编译、分析和显示 Dart 代码运行结果。后期主要进行过几次重要的改进：

• 2019 年 12 月，新版的 DartPad 发布，不仅推出了独立的访问域名 (dartpad.dev)，同时也支持运行 Flutter 应用 (通过网页展现)
• 2020 年 4 月，CodePen 开始支持 Flutter 应用，其使用了与 DartPad 相同的后端处理
• 2020 年 10 月，DartPad 空安全版本上线，为开发者们提供空安全编译环境的 Dart SDK
• 2021 年 5 月，DartPad 正式支持 Workshop 格式内容
• 2021 年 11 月，DartPad 支持 SDK 版本切换 (Stable / Beta / Old)，并引入一些常用的 package，比如 Google 字体 (google_fonts)、bloc、dartpad.cn/workshops.html?webserver=www.example.com/my_workshop
• 使用 Web 应用服务商提供的服务，类似于 Firebase、web.app、Web+、Webify 等 PaaS 服务；此时的访问网址应当是: dartpad.cn/workshops.html?webserver=your_app.web.app/path/to/my_workshop
• 直接将代码上传至 GitHub，通过 GitHub API 或原始存储地址进行访问。此时的访问网址可以是: dartpad.cn/workshops.html?webserver=raw.githubusercontent.com/your_name/my_workshop 也可以是: dartpad.cn/workshops.html?gh_owner=your_name&gh_repo=my_workshop

需要注意的是，在实际运行的过程中，Workshop 的读者会通过自己的浏览器从部署页面读取相应的内容，并展示和运行在 DartPad 页面，因此需要作者确保部署后的 Workshop 地址可以被正确访问。

体验现有的 Workshop

今年的 I/O Adventure，在 Flutter 产品分区通过 15 个虚拟展位展示了由 Flutter GDE 制作的 Workshop，大家可以到 io.google/ 线上体验:

推荐大家体验 Alex 制作的 LazyIndexedStack Worshop，代码仓库地址。