如何从GitHub Gists中创建DartPad实例

131 阅读2分钟

DartPad使得使用GitHub gists分享您的Dart和Flutter样本变得非常容易。

下面是如何在三个步骤中做到这一点。

1.把你所有的代码放在一个文件里

如果你直接从Dartpad开始,你可以跳过这一步,因为你已经把所有的代码放在一个文件里。

但如果你有一个本地的Dart或Flutter项目,你会想把你所有的代码放在main.dart

2.创建一个新的Gist

前往gist.github.com创建一个包含所有代码的新gist。

在GitHub上创建一个新的公共Gist

一旦你完成了这项工作,你就可以通过与大家分享你的Gist的URL。

但如果你把它变成一个DartPad,那就更好了

3.在Dartpad中打开它

你所要做的就是复制gist ID。

复制URL中的gist ID

然后,打开dartpad.dev并将gist ID附加到URL上。

Example:dartpad.dev/?id=cefdf4d…

这将加载你的代码并让你像往常一样运行它。

带有gist ID的Dartpad

DartPad上支持的软件包

你知道吗,你可以直接在DartPad中导入流行的软件包?

只要点击右下角的小信息按钮,你就会得到一个支持的软件包列表,以及它们的版本。

Dartpad支持的软件包

这已经包括了provider,riverpod,bloc, 和一些Firebase软件包

奖励:在网页中嵌入DartPad

你可以使用一个iframe轻松地将DartPad嵌入你的网站。

例如,这里是我在我的在线课程中使用它的方法。

<iframe width="100%" height="800px" src="https://dartpad.dev/embed-flutter.html?&split=50&theme=dark&id=408331308d26bdbb3361ecb98a50bd12"></iframe>

如需完整的选项列表,请参阅DartPad Wiki上的嵌入指南

结论

DartPad+GitHub gists为您提供了分享小型Dart或Flutter实例的便捷方式,您甚至可以将它们嵌入到您的网站上。

对于大型项目,您可以像往常一样创建一个公共的GitHub repo。

在任何情况下,分享就是关爱!😉

编码愉快!