docs: Adding DartPad live-coding for fluttercountertutorial
- Dominant language
- Dart
- Stars
- 12.5k
- Forks
- 3.4k
- PR merge metrics
- No merged PRs in 30d
Description
**Description**
Add a "codelab" that is live-editables for fluttercountertutorial. This was "requested" as
" Interactive Documentation
run/edit example code directly in documentation" source: https://github.com/felangel/bloc/wiki/Roadmap
### How to do it:
I've already converted the code and have a live example:
https://dartpad.dev/?id=90da115645caf06ffe10dc8ab170f347
There are two ways:
1) Have a link to live code. User gets a link to open the code.
To do this, just add a link with `` to open a new window.
2) (***BETTER***) Have it embedded in the page. (more like google codelabs)
Not hard to do. Just add the following ` tag` to the HTML.
(see sample in Codepen: https://codepen.io/chonghorizons/pen/MWEapaN, bonus, it auto-runs)
```
<iframe src="https://dartpad.dev/embed-flutter.html?id=90da115645caf06ffe10dc8ab170f347&split=50&null_safety=true&run=true&theme=dark" width="1000" height="700">
```
The only tricky thing is that Github flavored Markdown doesn't support Iframes, so it won't show right on github. But, I'm *guessing* that you are using docsify, so you can embed an iframe. ([syntax example](https://docsify.js.org/#/embed-files?id=embed-files)) I think you already embed code snippets.
=====
See also, discord message: https://discord.com/channels/649708778631200778/649708778631200784/916522770257567795
Contributor guide
Assessment
This issue has not been assessed yet.