feat: Embed 'How Flutter Works' video series

src/content/resources/architectural-overview.md

@@ -23,6 +23,12 @@ that feel natural on different platforms,
 embracing differences where they exist while sharing as
 much code as possible.
 
+> **Go deeper with the "How Flutter Works" series**
+>
+> Want a guided tour of Flutter's architecture? Watch this 6-part video series that explores what happens to your Dart code after you run `flutter build`, from the framework down to the engine.
+>
+> <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 During development, Flutter apps run in a VM that offers
 stateful hot reload of changes without needing a full recompile.
 (On web, Flutter supports hot restart and
@@ -270,6 +276,12 @@ particular, fast object instantiation and deletion). Fortunately, [Dart is
 particularly well suited for this
 task]({{site.flutter-medium}}/flutter-dont-fear-the-garbage-collector-d69b3ff1ca30).
 
+## The Three Trees: Widget, Element, and RenderObject
+
+Flutter's UI is built on a foundational concept of three parallel trees. Widgets provide the declarative configuration you write, Elements manage the lifecycle and state, and RenderObjects handle the layout and painting. Understanding how these trees work together is key to mastering Flutter.
+
+To learn more, watch the videos on **[The Three Trees](https://www.youtube.com/watch?v=xiW3ahr4CRU&list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM&index=2)** and the **[State class lifecycle](https://www.youtube.com/watch?v=FP737UMx7ss&list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM&index=3)** from the "How Flutter Works" series.
+
 ## Widgets
 
 As mentioned, Flutter emphasizes widgets as a unit of composition. Widgets are
@@ -545,6 +557,12 @@ Flutter apps use utility packages like
 approaches to implement the transformation of state into UI, such as the
 [flutter_hooks]({{site.pub}}/packages/flutter_hooks) package.
 
+## The Rendering Pipeline: From Widget to Pixel
+
+While many widgets simply configure other widgets, `RenderObjectWidget` is the bridge to the rendering layer. It creates and configures `RenderObject`s, which are responsible for the actual layout, painting, and hit-testing of your UI.
+
+For a visual explanation, see the videos on the **[RenderObjectWidget](https://www.youtube.com/watch?v=zcJlHVVM84I&list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM&index=4)** and the **[RenderObject](https://www.youtube.com/watch?v=EuG12bebwac&list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM&index=5)**.
+
 ## Rendering and layout
 
 This section describes the rendering pipeline, which is the series of steps that
@@ -833,6 +851,8 @@ platform-specific notes:
   [ANGLE](https://chromium.googlesource.com/angle/angle/+/master/README.md), a
   library that translates OpenGL API calls to the DirectX 11 equivalents.
 
+For a detailed look at how the engine and embedders work together, watch the video on **[The Flutter Engine and Embedders](https://www.youtube.com/watch?v=Y2aBMjWVv2Y&list=PLjxrf2q8roU1nbstACpBBSwHa-BuOILlM&index=6)**.
+
 ## Integrating with other code
 
 Flutter provides a variety of interoperability mechanisms, whether you're

src/content/ui/widgets/index.md

@@ -64,32 +64,32 @@ help you quickly get started with Flutter widgets.
 <div class="card-grid wide">
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true %}
+      {% ytEmbed 'D0xwcz2IqAY', 'CupertinoRadio - Flutter widget of the week', true %}
     </div>
   </div>
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true %}
+      {% ytEmbed '5H-WvH5O29I', 'CupertinoSheetRoute - Flutter widget of the week', true %}
     </div>
   </div>
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true %}
+      {% ytEmbed 'esnBf6V4C34', 'CupertinoSlidingSegmentedControl - Flutter widget of the week', true %}
     </div>
   </div>
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true %}
+      {% ytEmbed 'ua54JU7k1Us', 'CupertinoCheckbox - Flutter widget of the week', true %}
     </div>
   </div>
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true %}
+      {% ytEmbed '24tg_N4sdMQ', 'CupertinoSwitch - Flutter widget of the week', true %}
     </div>
   </div>
   <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true %}
+      {% ytEmbed 'GQ8ajYVF0bo', 'CarouselView - Flutter widget of the week', true %}
     </div>
   </div>
 </div>