diff --git a/src/content/resources/architectural-overview.md b/src/content/resources/architectural-overview.md index 2daee54b8c5..2841fc35713 100644 --- a/src/content/resources/architectural-overview.md +++ b/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. +> +> + 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 diff --git a/src/content/ui/widgets/index.md b/src/content/ui/widgets/index.md index 6ef6bab7127..b32f47adc30 100644 --- a/src/content/ui/widgets/index.md +++ b/src/content/ui/widgets/index.md @@ -64,32 +64,32 @@ help you quickly get started with Flutter widgets.
- {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true %} + {% ytEmbed 'D0xwcz2IqAY', 'CupertinoRadio - Flutter widget of the week', true %}
- {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true %} + {% ytEmbed '5H-WvH5O29I', 'CupertinoSheetRoute - Flutter widget of the week', true %}
- {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true %} + {% ytEmbed 'esnBf6V4C34', 'CupertinoSlidingSegmentedControl - Flutter widget of the week', true %}
- {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true %} + {% ytEmbed 'ua54JU7k1Us', 'CupertinoCheckbox - Flutter widget of the week', true %}
- {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true %} + {% ytEmbed '24tg_N4sdMQ', 'CupertinoSwitch - Flutter widget of the week', true %}
- {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true %} + {% ytEmbed 'GQ8ajYVF0bo', 'CarouselView - Flutter widget of the week', true %}