关于flutter:使用-DartPad-制作代码实践教程

3次阅读

共计 3538 个字符，预计需要花费 9 分钟才能阅读完成。

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、http、intl，并打算在前期一直引入新的 package，目前曾经反对了 87 个 package

DartPad 用户大部分是学习 Dart 编程语言的开发者，能够免于配置本地开发环境间接测试 Dart 编程语言个性。另一个场景是用于代码片段的分享，这能够是一个小性能，比方 Flutter API 文档里介绍某个 widget 时就会内嵌一个 DartPad 向开发者展现这个 widget 理论运行时的成果，代码片段也能够是一个最小可复现的 bug 代码，不便在形容问题的时候，同时将代码分享给 debug 的开发者。

本文将带你理解 DartPad 的另一种用法，咱们称之为 DartPad Workshop，咱们称之为 DartPad 实际教程，本文由 Flutter GDE Alex 撰写发表。

2021 年 5 月 Dart 2.13 (Flutter 2.2) 公布之时，Flutter 团队为 DartPad 新增了 Workshop 格局的反对，指标是反对和改善 Flutter 讲师在分享和进行课程解说时的实际体验，当年的 I/O 大会上也正式测试了很多个 Workshop，开发者们的反馈也十分踊跃。

以往的 DartPad 内容基于 GitHub Gist 分享，仅能分享一份代码，并且没有疏导式的步骤和交互。而 Workshop 是一套可交互、多步骤、疏导式且基于 Web Server 的内容架构。作者能够自定义 workshop 名称，定义每一个步骤的内容和解法，应用 Markdown 展现步骤的介绍，最初应用多种形式托管 workshop 源文件以进行应用。

接下来，我将带来大家从应用、创立、撰写到公布 workshop 的所有必要步骤，成为一名教学巨匠！

工欲善其事，必先利其器 。想要写好一个 Workshop，首先要理解 Workshop 最终会出现什么成果。

此处举荐浏览官网的 Sliver Workshop，简略体验一番。

从上图中咱们不难看出，整个 Workshop 被一分为三：

左侧为介绍内容块，同时能够进行步骤的切换；
右上为代码编辑器，能够点击 Run 运行代码；
右下则为界面输入、控制台以及文档界面。

同时，将鼠标放在左侧下方的 Step 1 上，将呈现步骤切换列表，展现出所有的可切换步骤。

当某个步骤蕴含解答（有 solution.dart 且 has_solution 为 true）时，左侧介绍内容块的右下角将显示 Show Solution 按钮，点击后右侧的代码内容将应用解答代码残缺替换。

整个过程中，无论是 Workshop 为你筹备好的代码，还是点击 Show Solution 替换的解答代码， 都能够在右侧的代码编辑器中进行批改并运行 。

新建一个目录，名字随便（例如 my_workshop），在 Workshop 实现时，构造该当如下：

my_workshop/
|---meta.yaml          # 元数据申明文件
|---step_01/           # 步骤目录（任意名称）|---instructions.md    # 步骤介绍 Markdown 文档
   |---snippet.dart       # 代码文件
   |---solution.dart      # 解答文件（可选）|---step_02/
   |---instructions.md
   |---snippet.dart

在元数据申明文件中，你须要申明如下构造的内容：

name: My workshop      # Workshop 的名称
type: dart             # Workshop 的类型，可为 "dart" 或 "flutter"
steps:                 # 申明步骤
  - name: Step 1         # 步骤的名称
    directory: step_01   # 步骤对应的目录
    has_solution: true   # 步骤是否有解答
  - name: Step 2
    directory: step_02
    has_solution: false

如果你的某一个步骤须要开发者入手批改，最初提供一份解答，你能够将 has_solution 设置为 true 并且创立 solution.dart 文件进行交互。

每个步骤蕴含的内容大同小异，但在开始写一个具体的步骤前，咱们还有一项有利于咱们开发 Workshop 的操作，那就是 在我的项目的同级目录新建一个 pubspec.yaml。pubspec.yaml 有助于 CLI / IDE 辨认并配置你的 Dart / Flutter 我的项目。如此你便能够像失常的 Dart / Flutter 我的项目一样编写你的 Workshop。

instructions.md

instructions.md 是每一个步骤对应的介绍文档，反对以 Markdown 的模式编写。实测在 DartPad 环境中能够反对 <iframe> 标签进行嵌入，你能够嵌入视频或者其余交互式内容来辅助你的介绍。

snippet.dart

该文件是每个步骤对应的必须 Dart 代码片段，
在切换步骤时对应的代码将间接替换到代码编辑器内。
代码文件有时候并不需要开发者关注所有的内容，
在这样的状况，举荐在文件中应用 TODO 标记须要开发者批改的内容。

solution.dart

该文件是可选的步骤解答。在应用它前，你须要在 meta.yml 中把对应步骤的 has_solution 设置为 true 方可失效。
它和 snippet.dart 格局基本相同，
在前文中咱们介绍到，点击 Show Solution 按钮，
能够将已有的代码替换为你编写的解答内容。
当你想教会开发者一种特定的实现形式时，解法文件能够施展它的作用。
但如果对应的步骤是开放性的体验尝试，就无需提供特定的解法。

文末可体验截图里的 Workshop，并参考其构建源码 (蕴含 instructions.md、snippet.dart、solution.dart 等文件 )。

Workshop 反对以 HTTP 服务器的形式被托管 。总的来说有三种次要的托管形式：

应用你的集体服务器进行部署，也能够托管在本地或局域网给共事或者学生分享。此时的拜访网址该当是: https://dartpad.cn/workshops.html?webserver=https://www.example.com/my_workshop
应用 Web 利用服务商提供的服务，相似于 Firebase、web.app、Web+、Webify 等 PaaS 服务；此时的拜访网址该当是: https://dartpad.cn/workshops.html?webserver=https://your_app.web.app/path/to/my_workshop
间接将代码上传至 GitHub，通过 GitHub API 或原始存储地址进行拜访。此时的拜访网址能够是: https://dartpad.cn/workshops.html?webserver=https://raw.githubusercontent.com/your_name/my_workshop 也能够是: https://dartpad.cn/workshops.html?gh_owner=your_name&gh_repo=my_workshop

须要留神的是，在理论运行的过程中，Workshop 的读者会通过本人的浏览器从部署页面读取相应的内容，并展现和运行在 DartPad 页面，因而须要作者确保部署后的 Workshop 地址能够被正确拜访。

往年的 I/O Adventure，在 Flutter 产品分区通过 15 个虚构展位展现了由 Flutter GDE 制作的 Workshop，大家能够到 https://io.google/ 线上体验:

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

正文完