该文章是机翻后整理的，方便个人查看，写的内容在dartPad的github中都有说明，英语好的话推荐直接去github看~
介绍
dartPad是谷歌dart团队在2015年为dart语言开发的一款在线编辑器，该编辑器是开源免费的，方便开发者了解dart和flutter。 它的地址是dartpad.dev。由于是国外服务器，访问有点慢，国内用户可以通过dartpad.cn访问。
功能
dartPad可以编译、分析、显示用户提交的Dart代码的结果，还可以作为iframe嵌入到其它网站里面。但是也有缺点，不能导入非官方的库和插件，所以推荐使用dartPad来学习和分享你的代码。
运行flutter
嵌入到网站
使用说明
编辑器其实没啥说的，无非就是输入代码后点一下run按钮，所以这里只说一下怎么使用dartPad来分享代码。
dartPad分享代码有两种方式：
1. 通过gist
gist好像被墙了，打不开可以去搜一下网站测速，测一下gist的域名，把可以访问的ip加入到host中。
先在githubGist(gist.github.com)创建一个代码片段库，库中必须包含一个main.dart文件
除了上面说的，还可以创建一些文件来辅助代码显示
- test.dart 测试main.dart文件的代码，dartPad会把两个文件合并成一个文件
- solution.dart main.dart中最理想的代码，该文件是隐藏的，需要用户自行打开查看
- hint.txt 在编辑器中给用户的提示，方便用户根据你给的提示进行练习
代码库创建后，需要用到它的id，比如上面图片中，URL的“9dee2497a99e560f52c6ecd541242c7b”就是id，我们需要把它放到链接“dartPad.cn/”的后面。
完整链接dartPad.cn/9dee2497a99…，打开链接，会发现gist中的代码在dartPad中显示出来了。
ps: dartPad会根据你是否import了material.dart来判断是不是flutter的程序
分享代码简单，直接发送上面的链接就行了，但是嵌入网站呢？难道直接用iframe加载上面的链接？
其实直接加载也可以，但是dartPad提供了更好的嵌入方式，可以通过参数控制编辑器主题等效果。 它有4个链接，分别是：
- dartpad.dev/embed-dart.html 运行dart，控制台在右边
- dartpad.dev/embed-inline.html 运行dart，控制台在下面
- dartpad.dev/embed-flutter.html 运行flutter，在右边显示flutter页面
- dartpad.dev/embed-html.html 运行dart:html，在右边显示html输出的页面
上面链接可以通过以下参数控制
参数
- id （必填）gist链接中提取出来的id
- split 编辑器代码区域和输出区域的比例
- run 设置为“true”打开后会自动运行代码，默认“false”
- sample_id 需要加载到编辑器的api文档的id，id可以在 api.flutter.dev/snippets/in… 中获取
- sample_channel 设置为“master”，将会从最新版本的文档服务器上（master-api.flutter.dev）读取api文档，设置其它值都是从稳定版本的文档服务器上（api.flutter.dev）读取
嵌入到网站示例
<div style=”position:relative;padding-top:56.25%;”>
<iframe src=’https://dartpad.dev/embed-flutter.html?id=9dee2497a99e560f52c6ecd541242c7b&theme=dark&run=true&split=50' style=”position:absolute;top:0;left:0;width:100%;height:100%;”>. </iframe>
</div>
2. 通过github仓库
使用github仓库的链接和gist是一样的，只是需要的参数和文件不同。
使用github仓库加载代码，需要创建一个dartpad_metadata.yaml，这个文件里面描述了dartPad应该怎样显示代码
dartpad_metadata.yaml文件示例
# 名称，随便~
name: Dart test
# dartpad引用的模式, 有两个模式，分别是 dart 和 html
mode: dart
# 所包含的文件，可以包含上面gist的那些文件。如果是html模式，还需要index.html和style.css
files:
- name: main.dart
可以在files中包含多个dart文件，而不只是一个，但是需要注意dartPad会把他们合并成一个文件，所以里面有一个文件需要调用里面的另一个文件的时候，不用再写import了。
以下是通过github仓库加载代码需要的参数
参数
- gh_owner github账户
- gh_repo 上面账户对应的仓库名称
- gh_path dartpad_metadata.yaml文件所在仓库的目录路径（路径最后面不用加 “/”）
- gh_ref 指定加载的分支，默认为 “master”
- ga_id 这个代码段的名称
嵌入到网站示例
比如有一个github链接
从链接中我们知道
- gh_owner:JoseAlba
- gh_repo:flutter_code
- gh_path:lib/dartpad
- gh_ref:master
那么dartPad链接是：dartpad.cn/embed-flutt…
<div style=”position:relative;padding-top:56.25%;”>
<iframe src=’https://dartpad.dev/embed-flutter.html?gh_owner=JoseAlba&gh_repo=flutter_code&gh_path=lib/dartpad&theme=dark&run=true&split=50' style=”position:absolute;top:0;left:0;width:100%;height:100%;”></iframe>
</div>
