Bumps [@angular/cdk](https://github.com/angular/components) from 21.2.14 to 22.0.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/angular/components/releases">@angular/cdk's releases</a>.</em></p> <blockquote> <h2>22.0.0</h2> <h3>aria</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="d91f46b4c5"><img src="https://img.shields.io/badge/d91f46b4c-feat-blue" alt="feat - d91f46b4c" /></a></td> <td><strong>accordion:</strong> introduce accordion harness (<a href="https://redirect.github.com/angular/components/issues/33046">#33046</a>)</td> </tr> <tr> <td><a href="e3d84f2e0a"><img src="https://img.shields.io/badge/e3d84f2e0-feat-blue" alt="feat - e3d84f2e0" /></a></td> <td><strong>combobox:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33194">#33194</a>)</td> </tr> <tr> <td><a href="0ca47b4a06"><img src="https://img.shields.io/badge/0ca47b4a0-feat-blue" alt="feat - 0ca47b4a0" /></a></td> <td><strong>combobox:</strong> migrate simple-combobox directly into primary entrypoints (<a href="https://redirect.github.com/angular/components/issues/33206">#33206</a>)</td> </tr> <tr> <td><a href="6ec07bc0cb"><img src="https://img.shields.io/badge/6ec07bc0c-feat-blue" alt="feat - 6ec07bc0c" /></a></td> <td><strong>grid:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33081">#33081</a>)</td> </tr> <tr> <td><a href="1885d35346"><img src="https://img.shields.io/badge/1885d3534-feat-blue" alt="feat - 1885d3534" /></a></td> <td><strong>listbox:</strong> introduce listbox harness (<a href="https://redirect.github.com/angular/components/issues/33064">#33064</a>)</td> </tr> <tr> <td><a href="75fae5275c"><img src="https://img.shields.io/badge/75fae5275-feat-blue" alt="feat - 75fae5275" /></a></td> <td><strong>menu:</strong> introduce menu harness (<a href="https://redirect.github.com/angular/components/issues/33067">#33067</a>)</td> </tr> <tr> <td><a href="c25e6252ec"><img src="https://img.shields.io/badge/c25e6252e-feat-blue" alt="feat - c25e6252e" /></a></td> <td><strong>tabs:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33079">#33079</a>)</td> </tr> <tr> <td><a href="a49508bacf"><img src="https://img.shields.io/badge/a49508bac-feat-blue" alt="feat - a49508bac" /></a></td> <td><strong>toolbar:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33068">#33068</a>)</td> </tr> <tr> <td><a href="30f2239728"><img src="https://img.shields.io/badge/30f223972-feat-blue" alt="feat - 30f223972" /></a></td> <td><strong>tree:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33066">#33066</a>)</td> </tr> <tr> <td><a href="91a4932f65"><img src="https://img.shields.io/badge/91a4932f6-fix-green" alt="fix - 91a4932f6" /></a></td> <td><strong>combobox:</strong> increases autocomplete demo's placeholder text c… (<a href="https://redirect.github.com/angular/components/issues/33084">#33084</a>)</td> </tr> <tr> <td><a href="218a77cf94"><img src="https://img.shields.io/badge/218a77cf9-fix-green" alt="fix - 218a77cf9" /></a></td> <td><strong>combobox:</strong> separates placeholder prefixes (<a href="https://redirect.github.com/angular/components/issues/33163">#33163</a>)</td> </tr> <tr> <td><a href="ce1d9a7286"><img src="https://img.shields.io/badge/ce1d9a728-fix-green" alt="fix - ce1d9a728" /></a></td> <td><strong>menu:</strong> allow menu item role override (<a href="https://redirect.github.com/angular/components/issues/33264">#33264</a>)</td> </tr> <tr> <td><a href="196b7064db"><img src="https://img.shields.io/badge/196b7064d-fix-green" alt="fix - 196b7064d" /></a></td> <td><strong>menu:</strong> defer menu item focus in case menus in cdk overlay (<a href="https://redirect.github.com/angular/components/issues/33258">#33258</a>)</td> </tr> <tr> <td><a href="6443b79f9a"><img src="https://img.shields.io/badge/6443b79f9-fix-green" alt="fix - 6443b79f9" /></a></td> <td><strong>menu:</strong> unable to set softDisabled (<a href="https://redirect.github.com/angular/components/issues/33265">#33265</a>)</td> </tr> </tbody> </table> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="1a5d5d101a"><img src="https://img.shields.io/badge/1a5d5d101-feat-blue" alt="feat - 1a5d5d101" /></a></td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="24115c0218"><img src="https://img.shields.io/badge/24115c021-feat-blue" alt="feat - 24115c021" /></a></td> <td><strong>portal:</strong> add directives support to ComponentPortal (<a href="https://redirect.github.com/angular/components/issues/33142">#33142</a>)</td> </tr> <tr> <td><a href="7426334c5e"><img src="https://img.shields.io/badge/7426334c5-fix-green" alt="fix - 7426334c5" /></a></td> <td><strong>a11y:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="81c6bbd89d"><img src="https://img.shields.io/badge/81c6bbd89-fix-green" alt="fix - 81c6bbd89" /></a></td> <td><strong>drag-drop:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="ffb23f6f82"><img src="https://img.shields.io/badge/ffb23f6f8-fix-green" alt="fix - ffb23f6f8" /></a></td> <td><strong>menu:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="4c298970ed"><img src="https://img.shields.io/badge/4c298970e-fix-green" alt="fix - 4c298970e" /></a></td> <td><strong>scrolling:</strong> make it easier to provide custom scrollable (<a href="https://redirect.github.com/angular/components/issues/33269">#33269</a>)</td> </tr> <tr> <td><a href="aa42b7798b"><img src="https://img.shields.io/badge/aa42b7798-fix-green" alt="fix - aa42b7798" /></a></td> <td><strong>table:</strong> expose rendered rows (<a href="https://redirect.github.com/angular/components/issues/33304">#33304</a>)</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="867ba993b3"><img src="https://img.shields.io/badge/867ba993b-feat-blue" alt="feat - 867ba993b" /></a></td> <td><strong>bottom-sheet:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="b4a89d5996"><img src="https://img.shields.io/badge/b4a89d599-feat-blue" alt="feat - b4a89d599" /></a></td> <td><strong>button:</strong> Add support for showing a progress indicator inside the button (<a href="https://redirect.github.com/angular/components/issues/32698">#32698</a>)</td> </tr> <tr> <td><a href="a46b0a1d42"><img src="https://img.shields.io/badge/a46b0a1d4-feat-blue" alt="feat - a46b0a1d4" /></a></td> <td><strong>core:</strong> add mixins for Material Design typography (<a href="https://redirect.github.com/angular/components/issues/32959">#32959</a>)</td> </tr> <tr> <td><a href="bf3596b53b"><img src="https://img.shields.io/badge/bf3596b53-feat-blue" alt="feat - bf3596b53" /></a></td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="85c16fe4bb"><img src="https://img.shields.io/badge/85c16fe4b-feat-blue" alt="feat - 85c16fe4b" /></a></td> <td><strong>tabs:</strong> add support for separate tab animation durations (<a href="https://redirect.github.com/angular/components/issues/32869">#32869</a>)</td> </tr> <tr> <td><a href="440cb16064"><img src="https://img.shields.io/badge/440cb1606-fix-green" alt="fix - 440cb1606" /></a></td> <td><strong>autocomplete:</strong> remove modal workaround</td> </tr> <tr> <td><a href="21f8bbbf22"><img src="https://img.shields.io/badge/21f8bbbf2-fix-green" alt="fix - 21f8bbbf2" /></a></td> <td><strong>badge:</strong> allow badge defaults to be configured (<a href="https://redirect.github.com/angular/components/issues/33312">#33312</a>)</td> </tr> <tr> <td><a href="07c2d002de"><img src="https://img.shields.io/badge/07c2d002d-fix-green" alt="fix - 07c2d002d" /></a></td> <td><strong>core:</strong> address sass compiler warnings (<a href="https://redirect.github.com/angular/components/issues/33040">#33040</a>)</td> </tr> <tr> <td><a href="add8f16c01"><img src="https://img.shields.io/badge/add8f16c0-fix-green" alt="fix - add8f16c0" /></a></td> <td><strong>list:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="31904510be"><img src="https://img.shields.io/badge/31904510b-fix-green" alt="fix - 31904510b" /></a></td> <td><strong>menu:</strong> close menu when cleared from trigger (<a href="https://redirect.github.com/angular/components/issues/33306">#33306</a>)</td> </tr> <tr> <td><a href="9d73c98b57"><img src="https://img.shields.io/badge/9d73c98b5-fix-green" alt="fix - 9d73c98b5" /></a></td> <td><strong>menu:</strong> missing panelClass getter (<a href="https://redirect.github.com/angular/components/issues/33191">#33191</a>)</td> </tr> <tr> <td><a href="348c3c89d5"><img src="https://img.shields.io/badge/348c3c89d-fix-green" alt="fix - 348c3c89d" /></a></td> <td><strong>select:</strong> remove modal workaround</td> </tr> <tr> <td><a href="f1a435508a"><img src="https://img.shields.io/badge/f1a435508-fix-green" alt="fix - f1a435508" /></a></td> <td><strong>sidenav:</strong> handle mixed sidenav and drawer (<a href="https://redirect.github.com/angular/components/issues/33274">#33274</a>)</td> </tr> <tr> <td><a href="c316198527"><img src="https://img.shields.io/badge/c31619852-fix-green" alt="fix - c31619852" /></a></td> <td><strong>sidenav:</strong> mark content as inert while open</td> </tr> <tr> <td><a href="a4d92c5fcb"><img src="https://img.shields.io/badge/a4d92c5fc-fix-green" alt="fix - a4d92c5fc" /></a></td> <td><strong>sidenav:</strong> more robust reset logic for inert attribute (<a href="https://redirect.github.com/angular/components/issues/33257">#33257</a>)</td> </tr> <tr> <td><a href="c2f1c5b035"><img src="https://img.shields.io/badge/c2f1c5b03-fix-green" alt="fix - c2f1c5b03" /></a></td> <td><strong>sidenav:</strong> query not resolving</td> </tr> <tr> <td><a href="75718e4fbe"><img src="https://img.shields.io/badge/75718e4fb-fix-green" alt="fix - 75718e4fb" /></a></td> <td><strong>sort:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="6ed6218c47"><img src="https://img.shields.io/badge/6ed6218c4-fix-green" alt="fix - 6ed6218c4" /></a></td> <td><strong>tabs:</strong> incorrect animation variable name (<a href="https://redirect.github.com/angular/components/issues/32941">#32941</a>)</td> </tr> </tbody> </table> <h3>google-maps</h3> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/angular/components/blob/main/CHANGELOG.md">@angular/cdk's changelog</a>.</em></p> <blockquote> <h1>22.0.0 "aurostibite-ambulance" (2026-06-03)</h1> <h2>Breaking Changes</h2> <h3>aria</h3> <ul> <li> <p>The legacy combobox and autocomplete implementations have been removed. Use the new standalone combobox instead.</p> <ul> <li>feat(aria/combobox): promote simple-combobox to stable un-prefixed combobox</li> </ul> <ul> <li>Relocates public, private, and example directories to clean <code>combobox</code> entry points.</li> <li>Renames internal layout symbols, selectors, and uppercase tokens (<code>SIMPLE_COMBOBOX_POPUP</code> -> <code>COMBOBOX_POPUP</code>).</li> <li>Establishes full documentation extraction parity with the <code>json_api</code> Bazel rule target.</li> <li>Standardizes the accompanying toolbar component showcase into the clean <code>aria-toolbar</code> path.</li> <li>Re-routes dev-app navigation links and migrates public API golden records.</li> </ul> </li> <li> <p><code>SimpleCombobox</code> has been promoted to <code>Combobox</code>. All <code>simple-combobox</code> prefixed symbols, selectors, and tokens have been renamed to use the <code>combobox</code> prefix.</p> <ul> <li>refactor(aria/combobox): relocate and restructure autocomplete and toolbar examples Relocate the autocomplete examples to <code>src/components-examples/aria/autocomplete</code> and toolbar examples to <code>src/components-examples/aria/toolbar</code>.</li> </ul> <ul> <li>Restore naming continuity with the historical codebase by stripping redundant prefixes from example filenames and component selectors.</li> <li>Sync dev-app preview routing layout paths and strict Bazel target dependency links.</li> </ul> </li> </ul> <h3>cdk</h3> <ul> <li> <ul> <li><code>CDK_DESCRIBEDBY_HOST_ATTRIBUTE</code> has been removed.</li> <li><code>CDK_DESCRIBEDBY_ID_PREFIX</code> has been removed.</li> <li>The <code>injector</code> parameter of the <code>ConfigurableFocusTrap</code> and <code>FocusTrap</code> constructors is now required.</li> <li>The boolean parameter of <code>ConfigurableFocusTrapFactory.create</code> has been replaced with a config object.</li> <li><code>MESSAGES_CONTAINER_ID</code> has been removed.</li> </ul> </li> <li> <ul> <li>The <code>event</code> parameter of <code>DropListRef.drop</code> is now required.</li> </ul> </li> <li> <ul> <li><code>ContextMenuTracker</code> has been renamed to <code>MenuTracker</code>.</li> </ul> </li> </ul> <h3>material</h3> <ul> <li> <ul> <li><code>MatListOption.checkboxPosition</code> has been removed. use <code>togglePosition</code> instead.</li> <li><code>MatListOptionCheckboxPosition</code> has been renamed to <code>MatListOptionTogglePosition</code>.</li> </ul> </li> <li> <ul> <li><code>ArrowViewState</code> has been removed.</li> <li><code>ArrowViewStateTransition</code> has been removed.</li> </ul> </li> </ul> <h3>multiple</h3> <ul> <li> <ul> <li>A bunch of constructors that with rest arguments have been removed. If you were extending Material/CDK components, you may have to update your <code>super</code> calls accordingly.</li> </ul> </li> <li> <p>Renames the values input/model to value in Combobox, Listbox, Tree, Menu, Toolbar, and Select. Users must update their templates to use the value property instead of values.</p> <ul> <li>refactor(multiple): update api goldens</li> </ul> </li> </ul> <h3>google-maps</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="e44ff83189">e44ff8318</a></td> <td>feat</td> <td>Add support for the gmp-click event (<a href="https://redirect.github.com/angular/components/pull/33147">#33147</a>)</td> </tr> <tr> <td><a href="b8201edeef">b8201edee</a></td> <td>fix</td> <td>deprecate heatmap layer (<a href="https://redirect.github.com/angular/components/pull/33208">#33208</a>)</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="867ba993b3">867ba993b</a></td> <td>feat</td> <td><strong>bottom-sheet:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="b4a89d5996">b4a89d599</a></td> <td>feat</td> <td><strong>button:</strong> Add support for showing a progress indicator inside the button (<a href="https://redirect.github.com/angular/components/pull/32698">#32698</a>)</td> </tr> <tr> <td><a href="a46b0a1d42">a46b0a1d4</a></td> <td>feat</td> <td><strong>core:</strong> add mixins for Material Design typography (<a href="https://redirect.github.com/angular/components/pull/32959">#32959</a>)</td> </tr> <tr> <td><a href="bf3596b53b">bf3596b53</a></td> <td>feat</td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="85c16fe4bb">85c16fe4b</a></td> <td>feat</td> <td><strong>tabs:</strong> add support for separate tab animation durations (<a href="https://redirect.github.com/angular/components/pull/32869">#32869</a>)</td> </tr> <tr> <td><a href="440cb16064">440cb1606</a></td> <td>fix</td> <td><strong>autocomplete:</strong> remove modal workaround</td> </tr> </tbody> </table> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="85e1545a29"><code>85e1545</code></a> release: cut the v22.0.0 release</li> <li><a href="da5c575d91"><code>da5c575</code></a> build: attempt to address flaky test (<a href="https://redirect.github.com/angular/components/issues/33332">#33332</a>)</li> <li><a href="daa6d8db8e"><code>daa6d8d</code></a> release: cut the v22.0.0-rc.3 release</li> <li><a href="47c0525097"><code>47c0525</code></a> build: prevent docs site from rendering Aria examples under Material (<a href="https://redirect.github.com/angular/components/issues/33324">#33324</a>)</li> <li><a href="21f8bbbf22"><code>21f8bbb</code></a> fix(material/badge): allow badge defaults to be configured (<a href="https://redirect.github.com/angular/components/issues/33312">#33312</a>)</li> <li><a href="8c8d1a16cd"><code>8c8d1a1</code></a> docs(material/bottom-sheet): update panelClass comment (<a href="https://redirect.github.com/angular/components/issues/33321">#33321</a>)</li> <li><a href="8339e2fa31"><code>8339e2f</code></a> build: update dev-infra actions to 649c3afeaa46674507b9625537e49de54a695e2b (...</li> <li><a href="10935f0ed2"><code>10935f0</code></a> refactor(multiple): migrate tests to use whenStable (<a href="https://redirect.github.com/angular/components/issues/33317">#33317</a>)</li> <li><a href="9750685164"><code>9750685</code></a> build: update bazel dependencies (<a href="https://redirect.github.com/angular/components/issues/33256">#33256</a>)</li> <li><a href="5ba22b6f81"><code>5ba22b6</code></a> build: update cross-repo angular dependencies (<a href="https://redirect.github.com/angular/components/issues/33270">#33270</a>)</li> <li>Additional commits viewable in <a href="https://github.com/angular/components/compare/v21.2.14...v22.0.0">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details>
Flutter samples
A collection of open source samples that illustrate best practices for Flutter.
Contributing
We appreciate fixes and necessary improvements to existing samples. But in most cases, we're not currently adding new samples to this repository while we rethink sample code in the new LLM world.
Please read the contributor's guide if you have contributions.
Googler's, you can freely add samples to the flutter/demos repository.
Index
Quickstarts
asset_transformation- Demonstrates how to transform images' color scales and formats.background_isolate_channels- Demonstrates how to use long-lived isolates.cupertino_gallery- A gallery of Cupertino widgets, demonstrating iOS-style UI components in Flutter.date_planner- An in-progress exploration of an iOS-style Date Planner app, similar to the SwiftUI Tutorial app.desktop_photo_search- Demonstrates desktop features in both Material and FluentUI design systems.dynamic_theme- A developer sample demonstrating how to call on-device Flutter APIs based on output from the Gemini API.form_app- A sample demonstrating different types of forms and best practices.google_maps- Demonstrates the Google Maps for Flutter plugin.navigation_and_routing- A sample that shows how to use go_router API to handle common navigation scenarios.pedometer- A demo of a plugin that leverages FFIgen & JNIgen to call platform APIs directly from Dart code.platform_design- This sample project shows a Flutter app that maximizes application code reuse while adhering to different design patterns on Android and iOS.simple_sdf- A simple Flutter fragment shaders sample project showing how to draw Signed Distance Functions with the FragmentShader API.simple_shader- A simple Flutter fragment shaders sample project.testing_app- A sample app that shows different types of testing in Flutter.web_embedding- This directory contains examples of how to embed Flutter in web apps (without iframes).element_embedding_demo- Modifies the index.html of a flutter app so it is launched in a custom hostElement. This is the most basic embedding example.ng-flutter- A simple Angular app (and component) that replicates the above example, but in an Angular style.
Native platform samples
add-to-app- Collection of samples that demonstrate embedding Flutter a view into a native app.fullscreen— Embeds a full screen instance of Flutter into an existing iOS or Android app.prebuilt_module— Embeds a full screen instance of Flutter as a prebuilt library that can be loaded into an existing iOS or Android app.plugin— Embeds a full screen Flutter instance that is using plugins into an existing iOS or Android app.books— Mimics a real world use-case of embedding Flutter into an existing Android app and demonstrates using Pigeon to communicate between Flutter and the host application.multiple_flutters— Shows the usage of the Flutter Engine Group APIs to embed multiple instances of Flutter into an existing app with low memory cost.android_view— Shows how to integrate a Flutter add-to-app module at a view level for Android.
android_splash_screenios_app_clipplatform_channels- A sample app which demonstrates how to use MethodChannel, EventChannel, BasicMessageChannel and MessageCodec in Flutter.platform_view_swift- A Flutter sample app that combines a native iOS UIViewController with a full-screen Flutter view.
Demo galleries
animations- Showcases Flutter's animation featuresmaterial_3_demo- showcases Material 3 features in the Flutter Material library.
Demo apps
compass_app- A sample application that implements MVVM architecture.veggie_seasons- A demo application.
Flutter sample code
Samples are correct and concise code that developers can quickly understand and easily reuse with minimal side effects. Samples teach developers how to be successful using Flutter and Dart. They are maintained on an ongoing basis to reflect changing APIs and best practices.
Types of samples
There are two types of sample code in this repository:
- Quickstarts provide a starting point to extend. They answer the question, "What is the minimal amount of code needed to implement this feature?"
- Demo apps are meant to be built and ran. They demo the product, not how to write code.
A majority of samples in this repository are quickstarts.
Usage
Every sample in this repo is fully runnable. To run an example,
use flutter run inside that example's directory.
See the getting started guide to install the flutter tool.
Important
If you want to run an add-to-app sample, there are additional requirements. We suggest reading the add-to-app documentation.
Interested in contributing?
See the contributor's guide!
Questions or issues?
If you have a general question about one of these samples or how to adapt its techniques for one of your own apps, try one of these resources:
If you run into a bug in one of the samples, please file an issue in the
flutter/samples issue tracker.