docs: Adding DartPad live-coding for fluttercountertutorial

[chonghorizons]

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 <a target="_blank" ... > 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 <iframe> 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"></iframe>

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) I think you already embed code snippets.

=====

See also, discord message: https://discord.com/channels/649708778631200778/649708778631200784/916522770257567795