Remove remaining "## Sample code" segments, and fix the snippet generator. (#27793)

This converts all remaining "## Sample code" segments into snippets, and fixes
the snippet generator to handle multiple snippets in the same dartdoc block
properly.

I also generated, compiled, and ran each of the existing application samples,
and fixed them up to be more useful and/or just run without errors.

This PR fixes these problems with examples:

1. Switching tabs in a snippet now works if there is more than one snippet in
   a single dartdoc block.
2. Generation of snippet code now works if there is more than one snippet.
3. Contrast of text and links in the code sample block has been improved to
   recommended levels.
4. Added five new snippet templates, including a "freeform" template to make
   it possible to show examples that need to change the app instantiation.
5. Fixed several examples to run properly, a couple by adding the "Scaffold"
   widget to the template, a couple by just fixing their code.
6. Fixed visual look of some of the samples when they run by placing many
   samples inside of a Scaffold.
7. In order to make it easier to run locally, changed the sample analyzer to
   remove the contents of the supplied temp directory before running, since
   having files that hang around is problematic (only a problem when running
   locally with the `--temp` argument).
8. Added a `SampleCheckerException` class, and handle sample checking
   exceptions more gracefully.
9. Deprecated the old "## Sample code" designation, and added enforcement for
   the deprecation.
10. Removed unnecessary `new` from templates (although they never appeared in
   the samples thanks to dartfmt, but still).

Fixes #26398
Fixes #27411

dev/docs/assets/snippets.css

@@ -1,6 +1,6 @@
 /* Styles for handling custom code snippets */
 .snippet-container {
-  background-color: #45aae8;
+  background-color: #2372a3;
   padding: 10px;
   overflow: auto;
 }
@@ -30,8 +30,21 @@
   color: white;
 }
 
+.snippet-description a:link {
+  color: #c7fcf4;
+}
+.snippet-description a:visited {
+  color: #c7dbfc;
+}
+.snippet-description a:hover {
+  color: white;
+}
+.snippet-description a:active {
+  color: #80b0fc;
+}
+
 .snippet-buttons button {
-  background-color: #45aae8;
+  background-color: #2372a3;
   border-style: none;
   color: white;
   padding: 10px 24px;
@@ -82,7 +95,7 @@
   height: 28px;
   width: 28px;
   transition: .3s ease;
-  background-color: #45aae8;
+  background-color: #2372a3;
 }
 
 .copy-button {
@@ -102,7 +115,7 @@
 
 .copy-image {
   opacity: 0.65;
-  color: #45aae8;
+  color: #2372a3;
   font-size: 28px;
   padding-top: 4px;
 }

dev/docs/assets/snippets.js

@@ -2,15 +2,10 @@
  * Scripting for handling custom code snippets
  */
 
-const shortSnippet = 'shortSnippet';
-const longSnippet = 'longSnippet';
-var visibleSnippet = shortSnippet;
-
 /**
- * Shows the requested snippet. Values for "name" can be "shortSnippet" or
- * "longSnippet".
+ * Shows the requested snippet, and stores the current state in visibleSnippet.
  */
-function showSnippet(name) {
+function showSnippet(name, visibleSnippet) {
   if (visibleSnippet == name) return;
   if (visibleSnippet != null) {
     var shown = document.getElementById(visibleSnippet);
@@ -39,6 +34,7 @@ function showSnippet(name) {
   if (button != null) {
     button.setAttributeNode(selectedAttribute);
   }
+  return visibleSnippet;
 }
 
 // Finds a sibling to given element with the given id.
@@ -64,8 +60,8 @@ function supportsCopying() {
 // Copies the text inside the currently visible snippet to the clipboard, or the
 // given element, if any.
 function copyTextToClipboard(element) {
-  if (element == null) {
-    var elementSelector = '#' + visibleSnippet + ' .language-dart';
+  if (typeof element === 'string') {
+    var elementSelector = '#' + element + ' .language-dart';
     element = document.querySelector(elementSelector);
     if (element == null) {
       console.log(