Add initial preview and review cards to FWE (#12821)

@ericwindmill These are rather rough, so please do either modify these
now or as a follow-up to match your vision for each lesson.

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: parlough

site/lib/_sass/base/_base.scss

@@ -92,6 +92,7 @@ picture {
   font-feature-settings: 'liga';
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
+  user-select: none;
 
   &.ms-filled {
     font-variation-settings: 'FILL' 1;

site/lib/_sass/components/_summary-card.scss

@@ -2,6 +2,7 @@
   background-color: var(--site-raised-bgColor-translucent);
   border-radius: var(--site-radius);
   border: 1px solid var(--site-inset-borderColor);
+  margin-block: 1rem;
 
   header {
     padding: 1rem 1.2rem 1.2rem;
@@ -10,13 +11,13 @@
 
     >div {
       flex: 1;
-      color: var(--site-base-fgColor-alt);
+      color: var(--site-base-fgColor-lighter);
     }
 
     h3 {
       margin: 0;
       font-size: 1.25rem;
-      font-weight: 600;
+      font-weight: 700;
       color: var(--site-base-fgColor);
     }
 
@@ -47,6 +48,7 @@
 
       font-size: 1rem;
       font-weight: 500;
+      font-family: var(--site-ui-fontFamily);
     }
   }
 
@@ -75,7 +77,7 @@
       margin: 0;
       border-top: 1px solid var(--site-inset-borderColor);
       padding: .8rem 1.2rem;
-      color: var(--site-base-fgColor-alt);
+      color: var(--site-base-fgColor-lighter);
 
       >:last-child {
         margin-bottom: 0;

src/content/learn/tutorial/adaptive-layout.md

@@ -5,6 +5,17 @@ layout: tutorial
 sitemap: false
 ---
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Create responsive layouts with LayoutBuilder
+    icon: fit_screen
+  - title: Detect screen size to choose different layouts
+    icon: devices
+  - title: Build a sidebar and detail layout for large screens
+    icon: view_sidebar
+</SummaryCard>
+
 Modern apps need to work well on screens of all sizes.
 On this page, you'll learn how to create layouts that
 adapt to different screen widths.
@@ -353,3 +364,29 @@ Both the sidebar and main content area show placeholder text for now.
 
 In the next lesson, you'll implement slivers to fill in
 the contact list content.
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Created responsive layouts with LayoutBuilder
+    icon: fit_screen
+    details: >-
+      `LayoutBuilder` provides the parent's size constraints in
+      its builder callback. By checking `constraints.maxWidth`,
+      you can decide which layout to show based on available space.
+  - title: Detected screen size to choose different layouts
+    icon: devices
+    details: >-
+      You used a 600-pixel breakpoint to
+      distinguish phone-sized screens from tablet-sized screens.
+      This common threshold helps your app adapt its UI to
+      provide the best experience on each device.
+  - title: Built a sidebar and detail layout for large screens
+    icon: view_sidebar
+    details: >-
+      On large screens, you displayed a fixed-width sidebar and
+      an `Expanded` detail panel side-by-side using a `Row`.
+      This classic pattern maximizes screen real estate on tablets and desktops.
+</SummaryCard>

src/content/learn/tutorial/advanced-ui.md

@@ -7,6 +7,17 @@ layout: tutorial
 sitemap: false
 ---
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Preview the Rolodex app you'll build
+    icon: preview
+  - title: Set up a project with Cupertino widgets
+    icon: phone_iphone
+  - title: Create data models for contacts and groups
+    icon: data_object
+</SummaryCard>
+
 In this third installment of the Flutter tutorial series,
 you'll use Flutter's Cupertino library to build a
 partial clone of the iOS Contacts app.
@@ -517,3 +528,29 @@ With all the extraneous code out of the way, in the next lesson,
 you'll start building the app in earnest.
 
 [`cupertino_icons` package]: {{site.pub-pkg}}/cupertino_icons
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Previewed the Rolodex app
+    icon: preview
+    details: >-
+      You're starting a new tutorial section focused on advanced UI features.
+      To make your app feel polished and native on any device,
+      you'll learn adaptive layouts, slivers, navigation, and theming.
+  - title: Set up a project with Cupertino widgets
+    icon: phone_iphone
+    details: >-
+      Unlike the previous lessons,
+      this app uses `CupertinoApp` instead of `MaterialApp`.
+      The Cupertino design system provides iOS-style widgets that
+      feel native on Apple devices.
+  - title: Created data models for contacts and groups
+    icon: data_object
+    details: >-
+      You created `Contact` and `ContactGroup` classes with sample data,
+      plus a `ContactGroupsModel` for state management.
+      This foundation supports the UI you'll build in the coming lessons.
+</SummaryCard>

src/content/learn/tutorial/change-notifier.md

@@ -5,6 +5,17 @@ layout: tutorial
 sitemap: false
 ---
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Create a ViewModel with ChangeNotifier
+    icon: layers
+  - title: Manage loading, success, and error states
+    icon: toggle_on
+  - title: Signal UI updates with notifyListeners
+    icon: notifications_active
+</SummaryCard>
+
 When developers talk about state-management in Flutter,
 they're essentially referring to the pattern by which your app
 updates the data it needs to render correctly and then
@@ -192,3 +203,31 @@ class MainApp extends StatelessWidget {
 Hot reload your app and check your console output.
 You should see either an article title or an error message,
 which confirms that your Model and ViewModel are wired up correctly.
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Created the ArticleViewModel with ChangeNotifier
+    icon: layers
+    details: >-
+      The ViewModel sits between your UI and Model,
+      managing state and connecting the two layers.
+      By extending `ChangeNotifier`, your ViewModel gains the ability to
+      notify listeners when data changes.
+  - title: Managed loading, success, and error states
+    icon: toggle_on
+    details: >-
+      Your ViewModel tracks three pieces of state:
+      `loading`, `summary`, and `errorMessage`.
+      Using `try` and `catch`, you handle network errors gracefully and
+      maintain consistent state for each possible outcome.
+  - title: Used notifyListeners to signal UI updates
+    icon: notifications_active
+    details: >-
+      Calling `notifyListeners()` tells any listening widgets to rebuild.
+      You call it after setting `loading = true` and again
+      after the operation completes.
+      This is how you can implement reactive UI updates in Flutter.
+</SummaryCard>

src/content/learn/tutorial/create-an-app.md

@@ -9,6 +9,17 @@ sitemap: false
 <!-- TODO(ewindmill) embed video -->
 {%- endcomment %}
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Create a new Flutter project using the CLI
+    icon: terminal
+  - title: Understand widgets and the widget tree
+    icon: account_tree
+  - title: Run your app and use hot reload
+    icon: bolt
+</SummaryCard>
+
 In this first section of the Flutter tutorial,
 you'll build the core UI of an app called 'Birdle',
 a game similar to [Wordle, the popular New York Times game][].
@@ -129,3 +140,32 @@ Change the text inside the string to anything you want.
 Then, hot-reload your app by
 pressing `r` in the terminal where the app is running.
 The running app should instantly show your updated text.
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Created your first Flutter project
+    icon: terminal
+    details: >-
+      You used `flutter create` with the `--empty` flag to
+      scaffold a minimal Flutter project.
+      The CLI generates the project structure and
+      boilerplate code needed to get started.
+  - title: Explored the widget tree
+    icon: account_tree
+    details: >-
+      Flutter UIs are built by composing **widgets** into a tree structure.
+      The `runApp` function takes a root widget, and that widget's
+      `build` method returns other widgets, forming the **widget tree**.
+      Your job as a Flutter developer is to
+      compose these widgets into custom UIs.
+  - title: Ran your app with hot reload
+    icon: bolt
+    details: >-
+      You ran your app with `flutter run` and
+      experienced **stateful hot reload**, which lets you
+      see code changes reflected in under a second without losing app state.
+      Press `r` in the terminal to trigger a hot reload.
+</SummaryCard>

src/content/learn/tutorial/devtools.md

@@ -7,6 +7,17 @@ sitemap: false
 
 {%- comment %} TODO(ewindmill) embed video {%- endcomment %}
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Explore your app's widget tree with the widget inspector
+    icon: account_tree
+  - title: Learn to debug layout issues like unbounded constraints
+    icon: bug_report
+  - title: Experiment with properties in real-time
+    icon: tune
+</SummaryCard>
+
 As your Flutter app grows in complexity, it becomes more important
 to understand how each of the widget properties affects the UI.
 The [Dart and Flutter DevTools][] provide you with
@@ -188,3 +199,31 @@ change the numerical value in the property editor.
 Then instantly see the update on your running app without
 needing to recompile or even hot reload.
 This allows for rapid iteration on UI design.
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Explored your app's widget tree with the widget inspector
+    icon: account_tree
+    details: >-
+      The widget inspector lets you visualize your entire widget tree,
+      select any widget to view its properties, and
+      jump directly to its source code.
+      It's an essential tool for understanding your app's structure.
+  - title: Learned about common layout issues
+    icon: bug_report
+    details: >-
+      You learned about **unbounded constraints**,
+      one of the most common errors hit in Flutter development.
+      This happens when widgets like
+      `Row`, `Column`, or `ListView` receive infinite constraints.
+      Now you can recognize and fix these issues when they occur.
+  - title: Experimented with properties in real-time
+    icon: tune
+    details: >-
+      The property editor shows all properties of a selected widget and
+      lets you modify values instantly with no recompiling or hot reload needed.
+      This enables rapid iteration when fine-tuning your UI.
+</SummaryCard>

src/content/learn/tutorial/http-requests.md

@@ -5,6 +5,17 @@ layout: tutorial
 sitemap: false
 ---
 
+<SummaryCard>
+title: What you'll accomplish
+items:
+  - title: Understand the MVVM architecture pattern
+    icon: layers
+  - title: Build HTTP requests with async/await
+    icon: cloud_download
+  - title: Handle errors and parse JSON responses
+    icon: data_object
+</SummaryCard>
+
 The overarching pattern that this tutorial implements is called
 _Model-View-ViewModel_ or _MVVM_.
 MVVM is an [architectural pattern][] used in client apps that
@@ -135,3 +146,32 @@ check out the [Getting started with Dart][] tutorial.
 [Wikipedia API]: https://en.wikipedia.org/api/rest_v1/
 [JSON]: {{site.dart-site}}/tutorial/json
 [Getting started with Dart]: {{site.dart-site}}/tutorial
+
+<SummaryCard>
+title: What you accomplished
+subtitle: Here's a summary of what you built and learned in this lesson.
+completed: true
+items:
+  - title: Understood the MVVM architecture pattern
+    icon: layers
+    details: >-
+      MVVM separates your app into Model (data operations),
+      View (user interface), and ViewModel (state management).
+      This separation of concerns makes your code more
+      testable, reusable, and easier to maintain.
+  - title: Built an HTTP request to fetch Wikipedia data
+    icon: cloud_download
+    details: >-
+      You created an `ArticleModel` class with a method that
+      uses `async` and `await` to fetch data from the Wikipedia API.
+      To safely build the URLs for the requests,
+      you used the `Uri.https` constructor which
+      handles encoding and special characters for you.
+  - title: Handled errors and parsed JSON responses
+    icon: data_object
+    details: >-
+      You checked the HTTP status code to detect errors and
+      used `jsonDecode` to parse the response body.
+      Then to convert the raw JSON into a typed Dart object,
+      you used the `Summary.fromJson` named constructor.
+</SummaryCard>