Add 29 Widget of the Week videos (#30415)

packages/flutter/lib/src/material/app_bar.dart

@@ -800,6 +800,8 @@ class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
 /// 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

packages/flutter/lib/src/material/floating_action_button.dart

@@ -42,6 +42,8 @@ class _DefaultHeroTag {
 /// 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

packages/flutter/lib/src/material/tooltip.dart

@@ -22,6 +22,8 @@ const Duration _kShowDuration = Duration(milliseconds: 1500);
 /// 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.

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

@@ -294,6 +294,8 @@ typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnaps
 /// 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 @@ class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>> {
 /// 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

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

@@ -133,6 +133,8 @@ class Directionality extends InheritedWidget {
 /// 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 @@ class ShaderMask extends SingleChildRenderObjectWidget {
 /// 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 @@ class BackdropFilter extends SingleChildRenderObjectWidget {
 ///
 /// 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 @@ class ClipRect extends SingleChildRenderObjectWidget {
 /// 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 @@ class PhysicalShape extends SingleChildRenderObjectWidget {
 
 /// 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 @@ class CompositedTransformFollower extends SingleChildRenderObjectWidget {
 
 /// 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 @@ class Padding extends SingleChildRenderObjectWidget {
 /// 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 @@ class IndexedStack extends Stack {
 /// [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 @@ class Flexible extends ParentDataWidget<Flex> {
 /// [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 @@ class Expanded extends Flexible {
 /// 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 @@ class IgnorePointer extends SingleChildRenderObjectWidget {
 /// 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

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

@@ -60,6 +60,8 @@ enum DismissDirection {
 /// 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.

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

@@ -22,6 +22,8 @@ import 'ticker_provider.dart';
 /// 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.

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

@@ -87,6 +87,8 @@ Rect _globalBoundingBoxFor(BuildContext context) {
 ///
 /// 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

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

@@ -452,6 +452,8 @@ abstract class AnimatedWidgetBaseState<T extends ImplicitlyAnimatedWidget> exten
 /// [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}

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

@@ -25,6 +25,8 @@ import 'framework.dart';
 ///
 /// 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.

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

@@ -19,6 +19,8 @@ typedef LayoutWidgetBuilder = Widget Function(BuildContext context, BoxConstrain
 /// 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].

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

@@ -400,6 +400,8 @@ const PageScrollPhysics _kPagePhysics = PageScrollPhysics();
 /// [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.

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

@@ -23,6 +23,8 @@ import 'media_query.dart';
 /// 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

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

@@ -656,6 +656,8 @@ abstract class SliverMultiBoxAdaptorWidget extends SliverWithKeepAliveWidget {
 /// 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 @@ class SliverFixedExtentList extends SliverMultiBoxAdaptorWidget {
 /// 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]

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

@@ -79,6 +79,8 @@ class _TableElementRow {
 
 /// 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.

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

@@ -441,6 +441,8 @@ class SizeTransition extends AnimatedWidget {
 /// 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 @@ class DefaultTextStyleTransition extends AnimatedWidget {
 /// 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