Embedding new diagrams for API Docs (#29697)

* Embedding new diarams for API docs: Container, ListView, Align.

* Moving the diagrams to be enclosed within the snippet windows.

* Fixed wording for the alt image text.

packages/flutter/lib/src/widgets/basic.dart

@@ -1576,6 +1576,8 @@ class Padding extends SingleChildRenderObjectWidget {
 /// [Alignment], [topRight]. This places the [FlutterLogo] in the top right corner
 /// of the parent blue [Container].
 ///
+/// ![A blue square container with the Flutter logo in the top right corner.](https://flutter.github.io/assets-for-api-docs/assets/widgets/align_constant.png)
+///
 /// ```dart
 /// Center(
 ///   child: Container(
@@ -1600,8 +1602,12 @@ class Padding extends SingleChildRenderObjectWidget {
 ///   of [FlutterLogo]/2 + height of [FlutterLogo]/2) = (36.0, 48.0).
 ///
 /// The [Alignment] class uses a coordinate system with an origin in the center
-/// of the [Container], and so [Align] will place the [FlutterLogo] at (36.0, 48.0)
+/// of the [Container], as shown with the [Icon] above. [Align] will place the
-/// according to this system.
+/// [FlutterLogo] at (36.0, 48.0) according to this coordinate system.
+///
+/// ![A blue square container with the Flutter logo positioned according to the
+/// Alignment specified above. A point is marked at the center of the container
+/// for the origin of the Alignment coordinate system.](https://flutter.github.io/assets-for-api-docs/assets/widgets/align_alignment.png)
 ///
 /// ```dart
 /// Center(
@@ -1637,6 +1643,10 @@ class Padding extends SingleChildRenderObjectWidget {
 /// corner of the [Container] in difference to the center-oriented system used in
 /// the example above with [Alignment].
 ///
+/// ![A blue square container with the Flutter logo positioned according to the
+/// FractionalOffset specified above. A point is marked at the top left corner
+/// of the container for the origin of the FractionalOffset coordinate system.](https://flutter.github.io/assets-for-api-docs/assets/widgets/align_fractional_offset.png)
+///
 /// ```dart
 /// Center(
 ///   child: Container(

packages/flutter/lib/src/widgets/container.dart

@@ -183,12 +183,13 @@ class DecoratedBox extends SingleChildRenderObjectWidget {
 /// see [Decoration.padding].
 ///
 /// {@tool sample}
-///
 /// This example shows a 48x48 amber square (placed inside a [Center] widget in
 /// case the parent widget has its own opinions regarding the size that the
 /// [Container] should take), with a margin so that it stays away from
 /// neighboring widgets:
 ///
+/// ![An amber colored container with the dimensions of 48 square pixels.](https://flutter.github.io/assets-for-api-docs/assets/widgets/container_a.png)
+///
 /// ```dart
 /// Center(
 ///   child: Container(
@@ -200,6 +201,7 @@ class DecoratedBox extends SingleChildRenderObjectWidget {
 /// )
 /// ```
 /// {@end-tool}
+///
 /// {@tool sample}
 ///
 /// This example shows how to use many of the features of [Container] at once.
@@ -210,6 +212,9 @@ class DecoratedBox extends SingleChildRenderObjectWidget {
 /// centered in the box. Finally, the [transform] applies a slight rotation to the
 /// entire contraption to complete the effect.
 ///
+/// ![A blue rectangular container with 'Hello World' in the center, rotated
+/// slightly in the z axis.](https://flutter.github.io/assets-for-api-docs/assets/widgets/container_b.png)
+///
 /// ```dart
 /// Container(
 ///   constraints: BoxConstraints.expand(

packages/flutter/lib/src/widgets/scroll_view.dart

@@ -608,6 +608,8 @@ abstract class BoxScrollView extends ScrollView {
 /// explicit [List<Widget>] of children. This [ListView]'s children are made up
 /// of [Container]s with [Text].
 ///
+/// ![A ListView of 3 amber colored containers with sample text.](https://flutter.github.io/assets-for-api-docs/assets/widgets/list_view.png)
+///
 /// ```dart
 /// ListView(
 ///   padding: const EdgeInsets.all(8.0),
@@ -631,11 +633,14 @@ abstract class BoxScrollView extends ScrollView {
 /// )
 /// ```
 /// {@end-tool}
+///
 /// {@tool sample}
 /// This example mirrors the previous one, creating the same list using the
 /// [ListView.builder] constructor. Using the [IndexedWidgetBuilder], children
 /// are built lazily and can be infinite in number.
 ///
+/// ![A ListView of 3 amber colored containers with sample text.](https://flutter.github.io/assets-for-api-docs/assets/widgets/list_view_builder.png)
+///
 /// ```dart
 /// final List<String> entries = <String>['A', 'B', 'C'];
 /// final List<int> colorCodes = <int>[600, 500, 100];
@@ -653,11 +658,15 @@ abstract class BoxScrollView extends ScrollView {
 /// );
 /// ```
 /// {@end-tool}
+///
 /// {@tool sample}
 /// This example continues to build from our the previous ones, creating a
 /// similar list using [ListView.separated]. Here, a [Divider] is used as a
 /// separator.
 ///
+/// ![A ListView of 3 amber colored containers with sample text and a Divider
+/// between each of them.](https://flutter.github.io/assets-for-api-docs/assets/widgets/list_view_separated.png)
+///
 /// ```dart
 /// final List<String> entries = <String>['A', 'B', 'C'];
 /// final List<int> colorCodes = <int>[600, 500, 100];