Add recent WotW videos to docs (#7406)

* add Widget of the Week videos to relevant docs pages

* adding more WoTW videos to our doc tutorials

* fix file formatting

Author: khanhnwin

src/_sass/components/_content.scss

@@ -80,3 +80,27 @@
     border: 1px solid #ccc;
   }
 }
+
+.video-card {
+  flex: 0 0 calc((100% / 2) - 1rem);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.full-width {
+  width: 100%;
+}
+
+iframe.full-width {
+  aspect-ratio: 16 / 9;
+}

src/cookbook/design/fonts.md

@@ -19,6 +19,8 @@ or perhaps you downloaded a font from [Google Fonts][].
 {{site.alert.note}}
   Check out the [google_fonts][] package for direct access
   to over 1,000 open-sourced font families.
+
+  <iframe class="full-width" src="{{site.youtube-site}}/embed/8Vzv2CdbEY0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 {{site.alert.end}}
 
 {{site.alert.note}}

src/cookbook/design/snackbars.md

@@ -67,6 +67,8 @@ const snackBar = SnackBar(
 ScaffoldMessenger.of(context).showSnackBar(snackBar);
 ```
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/lytQi-slT5Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 ## 3. Provide an optional action
 
 You might want to provide an action to the user when

src/cookbook/design/themes.md

@@ -70,6 +70,8 @@ wrap a section of the app in a `Theme` widget.
 There are two ways to approach this: creating a unique `ThemeData`,
 or extending the parent theme.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/oTvQDJOBXmM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 ### Creating unique `ThemeData`
 
 If you don't want to inherit any application colors or font styles,

src/cookbook/effects/parallax-scrolling.md

@@ -217,6 +217,8 @@ before the widget is painted. In other words,
 you can intercept the painting phase and take control
 to reposition your child widgets however you want.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/NG6pvXpnIso" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 {{site.alert.note}}
   In cases where you need control over what a child paints,
   rather than where a child is painted,

src/cookbook/gestures/handling-taps.md

@@ -19,6 +19,8 @@ you want users to interact with your app.
 Use the [`GestureDetector`][] widget to respond
 to fundamental actions, such as tapping and dragging.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/WhVXkCFPmK4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 This recipe shows how to make a custom button that shows
 a snackbar when tapped with the following steps:
 

src/cookbook/images/cached-images.md

@@ -15,6 +15,8 @@ In some cases, it's handy to cache images as they're downloaded from the
 web, so they can be used offline. For this purpose,
 use the [`cached_network_image`][] package.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/fnHr_rsQwDA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 In addition to caching, the `cached_network_image`
 package also supports placeholders and fading images
 in as they're loaded.

src/cookbook/persistence/key-value.md

@@ -29,6 +29,8 @@ This recipe uses the following steps:
   3. Read data.
   4. Remove data.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/sa_U0jffQII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
+
 ## 1. Add the dependency
 
 Before starting, add the [`shared_preferences`][]

src/cookbook/persistence/reading-writing-files.md

@@ -25,6 +25,8 @@ This recipe uses the following steps:
   3. Write data to the file.
   4. Read data from the file.
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/Ci4t-NkOY3I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 ## 1. Find the correct local path
 
 This example displays a counter. When the counter changes,

src/development/data-and-backend/state-mgmt/options.md

@@ -181,6 +181,7 @@ doesn't need a `BuildContext`.
   case you already use `flutter_hooks`.
 * [Flutter state management for minimalists][], by Suragch
 
+<iframe class="full-width" src="{{site.youtube-site}}/embed/f9XQD5mf6FY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 [Flutter state management for minimalists]: {{site.medium}}/flutter-community/flutter-state-management-for-minimalists-4c71a2f2f0c1?sk=6f9cedfb550ca9cc7f88317e2e7055a0
 [GetIt package]: {{site.pub-pkg}}/get_it