Add 29 Widget of the Week videos (#30415)
diff --git a/packages/flutter/lib/src/material/app_bar.dart b/packages/flutter/lib/src/material/app_bar.dart
index f92bb2b..a35e8bb 100644
--- a/packages/flutter/lib/src/material/app_bar.dart
+++ b/packages/flutter/lib/src/material/app_bar.dart
@@ -800,6 +800,8 @@
/// common actions with [IconButton]s which are optionally followed by a
/// [PopupMenuButton] for less common operations.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=R9C5KMJKluE}
+///
/// Sliver app bars are typically used as the first child of a
/// [CustomScrollView], which lets the app bar integrate with the scroll view so
/// that it can vary in height according to the scroll offset or float above the
diff --git a/packages/flutter/lib/src/material/floating_action_button.dart b/packages/flutter/lib/src/material/floating_action_button.dart
index a0ee70c..6465814 100644
--- a/packages/flutter/lib/src/material/floating_action_button.dart
+++ b/packages/flutter/lib/src/material/floating_action_button.dart
@@ -42,6 +42,8 @@
/// to promote a primary action in the application. Floating action buttons are
/// most commonly used in the [Scaffold.floatingActionButton] field.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=2uaoEDOgk_I}
+///
/// Use at most a single floating action button per screen. Floating action
/// buttons should be used for positive actions such as "create", "share", or
/// "navigate". (If more than one floating action button is used within a
diff --git a/packages/flutter/lib/src/material/tooltip.dart b/packages/flutter/lib/src/material/tooltip.dart
index 8341b24..46a20b1 100644
--- a/packages/flutter/lib/src/material/tooltip.dart
+++ b/packages/flutter/lib/src/material/tooltip.dart
@@ -22,6 +22,8 @@
/// show a label when the widget long pressed (or when the user takes some
/// other appropriate action).
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=EeEfD5fI-5Q}
+///
/// Many widgets, such as [IconButton], [FloatingActionButton], and
/// [PopupMenuButton] have a `tooltip` property that, when non-null, causes the
/// widget to include a [Tooltip] in its build.
diff --git a/packages/flutter/lib/src/widgets/async.dart b/packages/flutter/lib/src/widgets/async.dart
index 3e833d0..7491908 100644
--- a/packages/flutter/lib/src/widgets/async.dart
+++ b/packages/flutter/lib/src/widgets/async.dart
@@ -294,6 +294,8 @@
/// Widget that builds itself based on the latest snapshot of interaction with
/// a [Stream].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=MkKEWHfy99Y}
+///
/// Widget rebuilding is scheduled by each interaction, using [State.setState],
/// but is otherwise decoupled from the timing of the stream. The [builder]
/// is called at the discretion of the Flutter pipeline, and will thus receive a
@@ -436,6 +438,8 @@
/// A general guideline is to assume that every `build` method could get called
/// every frame, and to treat omitted calls as an optimization.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=ek8ZPdWj4Qo}
+///
/// ## Timing
///
/// Widget rebuilding is scheduled by the completion of the future, using
diff --git a/packages/flutter/lib/src/widgets/basic.dart b/packages/flutter/lib/src/widgets/basic.dart
index e0cc368..db3b46d 100644
--- a/packages/flutter/lib/src/widgets/basic.dart
+++ b/packages/flutter/lib/src/widgets/basic.dart
@@ -133,6 +133,8 @@
/// buffer. For the value 0.0, the child is simply not painted at all. For the
/// value 1.0, the child is painted immediately without an intermediate buffer.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=9hltevOHQBw}
+///
/// {@tool sample}
///
/// This example shows some [Text] when the `_visible` member field is true, and
@@ -340,6 +342,8 @@
/// widget's clip. If there's no clip, the filter will be applied to the full
/// screen.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=dYRs7Q1vfYI}
+///
/// {@tool sample}
/// If the [BackdropFilter] needs to be applied to an area that exactly matches
/// its child, wraps the [BackdropFilter] with a clip widget that clips exactly
@@ -419,6 +423,8 @@
///
/// Painters are implemented by subclassing [CustomPainter].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=kp14Y4uHpHs}
+///
/// Because custom paint calls its painters during paint, you cannot call
/// `setState` or `markNeedsLayout` during the callback (the layout for this
/// frame has already happened).
@@ -607,6 +613,8 @@
/// clip, but the size and location of the clip can be customized using a custom
/// [clipper].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=eI43jkQkrvs}
+///
/// See also:
///
/// * [CustomClipper], for information about creating custom clips.
@@ -983,6 +991,8 @@
/// A widget that applies a transformation before painting its child.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=9z_YNlRlWfA}
+///
/// {@tool sample}
///
/// This example rotates and skews an orange box containing text, keeping the
@@ -1305,6 +1315,8 @@
/// Scales and positions its child within itself according to [fit].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=T4Uehk3_wlY}
+///
/// See also:
///
/// * [Transform], which applies an arbitrary transform to its child widget at
@@ -1556,6 +1568,8 @@
/// tight constraint that is bigger than the child's natural size,
/// with an alignment of [Alignment.bottomRight].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=g2E7yl3MwMk}
+///
/// This widget will be as big as possible if its dimensions are constrained and
/// [widthFactor] and [heightFactor] are null. If a dimension is unconstrained
/// and the corresponding size factor is null then the widget will match its
@@ -3203,6 +3217,8 @@
/// [StatelessWidget]s or [StatefulWidget]s (not other kinds of widgets, like
/// [RenderObjectWidget]s).
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=EgtPleVwxBQ}
+///
/// If a widget is wrapped in a [Positioned], then it is a _positioned_ widget
/// in its [Stack]. If the [top] property is non-null, the top edge of this child
/// will be positioned [top] layout units from the top of the stack widget. The
@@ -4293,6 +4309,8 @@
/// [Flex] must contain only [StatelessWidget]s or [StatefulWidget]s (not other
/// kinds of widgets, like [RenderObjectWidget]s).
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=_rnZaagadyo}
+///
/// {@tool snippet --template=stateless_widget_material}
/// This example shows how to use an [Expanded] widget in a [Column] so that
/// it's middle child, a [Container] here, expands to fill the space.
@@ -4399,6 +4417,8 @@
/// The runs themselves are then positioned in the cross axis according to the
/// [runSpacing] and [runAlignment].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=z5iw2SeFx2M}
+///
/// {@tool sample}
///
/// This example renders some [Chip]s representing four contacts in a [Wrap] so
@@ -5560,6 +5580,8 @@
/// from being the target of located events, because it returns true from
/// [RenderBox.hitTest].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=65HoWqBboI8}
+///
/// See also:
///
/// * [IgnorePointer], which also prevents its children from receiving pointer
diff --git a/packages/flutter/lib/src/widgets/dismissible.dart b/packages/flutter/lib/src/widgets/dismissible.dart
index a275aa4..a95475a 100644
--- a/packages/flutter/lib/src/widgets/dismissible.dart
+++ b/packages/flutter/lib/src/widgets/dismissible.dart
@@ -60,6 +60,8 @@
/// non-null, the Dismissible widget animates its height (or width, whichever is
/// perpendicular to the dismiss direction) to zero over the [resizeDuration].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=iEMgjrfuc58}
+///
/// Backgrounds can be used to implement the "leave-behind" idiom. If a background
/// is specified it is stacked behind the Dismissible's child and is exposed when
/// the child moves.
diff --git a/packages/flutter/lib/src/widgets/fade_in_image.dart b/packages/flutter/lib/src/widgets/fade_in_image.dart
index f5b121e..75e260f 100644
--- a/packages/flutter/lib/src/widgets/fade_in_image.dart
+++ b/packages/flutter/lib/src/widgets/fade_in_image.dart
@@ -22,6 +22,8 @@
/// so that the image appears on screen with a graceful animation rather than
/// abruptly pops onto the screen.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=pK738Pg9cxc}
+///
/// If the [image] emits an [ImageInfo] synchronously, such as when the image
/// has been loaded and cached, the [image] is displayed immediately and the
/// [placeholder] is never displayed.
diff --git a/packages/flutter/lib/src/widgets/heroes.dart b/packages/flutter/lib/src/widgets/heroes.dart
index 09679cc..c959670 100644
--- a/packages/flutter/lib/src/widgets/heroes.dart
+++ b/packages/flutter/lib/src/widgets/heroes.dart
@@ -87,6 +87,8 @@
///
/// Routes must not contain more than one [Hero] for each [tag].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=Be9UH1kXFDw}
+///
/// ## Discussion
///
/// Heroes and the [Navigator]'s [Overlay] [Stack] must be axis-aligned for
diff --git a/packages/flutter/lib/src/widgets/implicit_animations.dart b/packages/flutter/lib/src/widgets/implicit_animations.dart
index 169354b..b4c00dc 100644
--- a/packages/flutter/lib/src/widgets/implicit_animations.dart
+++ b/packages/flutter/lib/src/widgets/implicit_animations.dart
@@ -452,6 +452,8 @@
/// [AnimatedWidget] such as the [DecoratedBoxTransition] or use your own
/// [AnimationController].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=yI-8QHpGIP4}
+///
/// Here's an illustration of what using this widget looks like, using a [curve]
/// of [Curves.fastOutSlowIn].
/// {@animation 250 266 https://flutter.github.io/assets-for-api-docs/assets/widgets/animated_container.mp4}
diff --git a/packages/flutter/lib/src/widgets/inherited_model.dart b/packages/flutter/lib/src/widgets/inherited_model.dart
index d666c91..f03fae4 100644
--- a/packages/flutter/lib/src/widgets/inherited_model.dart
+++ b/packages/flutter/lib/src/widgets/inherited_model.dart
@@ -25,6 +25,8 @@
///
/// The type parameter `T` is the type of the model aspect objects.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=ml5uefGgkaA}
+///
/// Widgets create a dependency on an [InheritedModel] with a static method:
/// [InheritedModel.inheritFrom]. This method's `context` parameter
/// defines the subtree that will be rebuilt when the model changes.
diff --git a/packages/flutter/lib/src/widgets/layout_builder.dart b/packages/flutter/lib/src/widgets/layout_builder.dart
index 3c16754..ab7f34d 100644
--- a/packages/flutter/lib/src/widgets/layout_builder.dart
+++ b/packages/flutter/lib/src/widgets/layout_builder.dart
@@ -19,6 +19,8 @@
/// the child's intrinsic size. The [LayoutBuilder]'s final size will match its
/// child's size.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=IYDVcriKjsw}
+///
/// If the child should be smaller than the parent, consider wrapping the child
/// in an [Align] widget. If the child might want to be bigger, consider
/// wrapping it in a [SingleChildScrollView].
diff --git a/packages/flutter/lib/src/widgets/page_view.dart b/packages/flutter/lib/src/widgets/page_view.dart
index 9193ed2..07531e2 100644
--- a/packages/flutter/lib/src/widgets/page_view.dart
+++ b/packages/flutter/lib/src/widgets/page_view.dart
@@ -400,6 +400,8 @@
/// [PageView] is first constructed, and the [PageController.viewportFraction],
/// which determines the size of the pages as a fraction of the viewport size.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=J1gE9xvph-A}
+///
/// See also:
///
/// * [PageController], which controls which page is visible in the view.
diff --git a/packages/flutter/lib/src/widgets/safe_area.dart b/packages/flutter/lib/src/widgets/safe_area.dart
index 2c847db..8a56457 100644
--- a/packages/flutter/lib/src/widgets/safe_area.dart
+++ b/packages/flutter/lib/src/widgets/safe_area.dart
@@ -23,6 +23,8 @@
/// When a [minimum] padding is specified, the greater of the minimum padding
/// or the safe area padding will be applied.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=lkF0TQJO0bA}
+///
/// See also:
///
/// * [SliverSafeArea], for insetting slivers to avoid operating system
diff --git a/packages/flutter/lib/src/widgets/sliver.dart b/packages/flutter/lib/src/widgets/sliver.dart
index cf28841..a033ed9 100644
--- a/packages/flutter/lib/src/widgets/sliver.dart
+++ b/packages/flutter/lib/src/widgets/sliver.dart
@@ -656,6 +656,8 @@
/// means [SliverList] cannot learn their main axis extent. Instead, newly
/// materialized children are placed adjacent to existing children.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=ORiTTaVY6mM}
+///
/// If the children have a fixed extent in the main axis, consider using
/// [SliverFixedExtentList] rather than [SliverList] because
/// [SliverFixedExtentList] does not need to perform layout on its children to
@@ -762,6 +764,8 @@
/// The main axis direction of a grid is the direction in which it scrolls; the
/// cross axis direction is the orthogonal direction.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=ORiTTaVY6mM}
+///
/// {@tool sample}
///
/// This example, which would be inserted into a [CustomScrollView.slivers]
diff --git a/packages/flutter/lib/src/widgets/table.dart b/packages/flutter/lib/src/widgets/table.dart
index e71b2a7..d5f9564 100644
--- a/packages/flutter/lib/src/widgets/table.dart
+++ b/packages/flutter/lib/src/widgets/table.dart
@@ -79,6 +79,8 @@
/// A widget that uses the table layout algorithm for its children.
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=_lbE0wsVZSw}
+///
/// If you only have one row, the [Row] widget is more appropriate. If you only
/// have one column, the [SliverList] or [Column] widgets will be more
/// appropriate.
diff --git a/packages/flutter/lib/src/widgets/transitions.dart b/packages/flutter/lib/src/widgets/transitions.dart
index 358c229..86e2513 100644
--- a/packages/flutter/lib/src/widgets/transitions.dart
+++ b/packages/flutter/lib/src/widgets/transitions.dart
@@ -441,6 +441,8 @@
/// For a widget that automatically animates between the sizes of two children,
/// fading between them, see [AnimatedCrossFade].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=rLwWVbv3xDQ}
+///
/// Here's an illustration of the [FadeTransition] widget, with it's [opacity]
/// animated by a [CurvedAnimation] set to [Curves.fastOutSlowIn]:
/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/fade_transition.mp4}
@@ -812,6 +814,8 @@
/// For simple cases without additional state, consider using
/// [AnimatedWidget].
///
+/// {@youtube 560 315 https://www.youtube.com/watch?v=N-RiyZlv8v8}
+///
/// ## Performance optimizations
///
/// If your [builder] function contains a subtree that does not depend on the
