|  | {@inject-html} | 
|  | <a name="{{id}}"></a> | 
|  | <div class="anchor-container"> | 
|  | <a class="anchor-button-overlay anchor-button" title="Copy link to clipboard" | 
|  | onmouseenter="fixHref(this, '{{id}}');" | 
|  | onclick="fixHref(this, '{{id}}'); copyStringToClipboard(this.href);" | 
|  | href="#"> | 
|  | <i class="material-icons copy-image">link</i> | 
|  | </a> | 
|  | </div> | 
|  | <div class="snippet-buttons"> | 
|  | <script>var visibleSnippet{{serial}} = "longSnippet{{serial}}";</script> | 
|  | <button id="longSnippet{{serial}}Button" | 
|  | onclick="visibleSnippet{{serial}} = showSnippet('longSnippet{{serial}}', visibleSnippet{{serial}});" | 
|  | selected> | 
|  | Interactive App | 
|  | </button> | 
|  | <button id="shortSnippet{{serial}}Button" | 
|  | onclick="visibleSnippet{{serial}} = showSnippet('shortSnippet{{serial}}', visibleSnippet{{serial}});"> | 
|  | Sample code | 
|  | </button> | 
|  | </div> | 
|  | <div class="snippet-container"> | 
|  | <div class="snippet" id="longSnippet{{serial}}"> | 
|  | {{description}} | 
|  | <iframe class="snippet-dartpad" src="https://dartpad.dev/embed-flutter.html?split=60&run=true&sample_id={{id}}&sample_channel={{channel}}"></iframe> | 
|  | <div class="snippet-description">To create a local project with this code sample, run:<br/> | 
|  | <span class="snippet-create-command">flutter create --sample={{id}} mysample</span> | 
|  | </div> | 
|  | </div> | 
|  | <div class="snippet" id="shortSnippet{{serial}}" hidden> | 
|  | {{description}} | 
|  | <div class="copyable-container"> | 
|  | <button class="copy-button-overlay copy-button" title="Copy to clipboard" | 
|  | onclick="copyTextToClipboard(visibleSnippet{{serial}});"> | 
|  | <i class="material-icons copy-image">assignment</i> | 
|  | </button> | 
|  | <pre class="language-{{language}}"><code class="language-{{language}}">{{code}}</code></pre> | 
|  | </div> | 
|  | </div> | 
|  | </div> | 
|  | {@end-inject-html} |