• Greg Spencer's avatar
    Update samples to work with Dartpad, and convert all that make… (#50377) · 9fb781a5
    Greg Spencer authored
    This PR modifies the existing API docs samples to use DartPad so that all of the samples are now interactive apps on the API docs site.
    
    It also removes the restriction for the max width of the description area so that the dartpad region can expand horizontally.
    
    I updated the first paragraph on the API docs to indicate that Flutter is more than just mobile now (same text as the README.md at the top level).
    
    I modified a few of the examples so that they looked nicer, and fit better on the page.
    
    I added the sample description text above each DartPad instance, since that often defines the context of the example.
    
    I removed animations and images when they were redundant with the sample content. There were a few that made sense to keep, so I did.
    9fb781a5
sample.html 1.94 KB
{@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}} = "shortSnippet{{serial}}";</script>
  <button id="shortSnippet{{serial}}Button"
          onclick="visibleSnippet{{serial}} = showSnippet('shortSnippet{{serial}}', visibleSnippet{{serial}});"
          selected>Sample</button>
  <button id="longSnippet{{serial}}Button"
          onclick="visibleSnippet{{serial}} = showSnippet('longSnippet{{serial}}', visibleSnippet{{serial}});">Sample in an App</button>
</div>
<div class="snippet-container">
  <div class="snippet" id="shortSnippet{{serial}}">
    {{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 class="snippet" id="longSnippet{{serial}}" hidden>
    <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 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}}">{{app}}</code></pre>
    </div>
  </div>
</div>
{@end-inject-html}