mirror of
https://github.com/flutter/samples.git
synced 2026-06-25 23:58:44 +00:00
ecc4df1bdc
Bumps [@angular/material](https://github.com/angular/components) from 21.2.14 to 22.0.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/angular/components/releases">@angular/material's releases</a>.</em></p> <blockquote> <h2>22.0.2</h2> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="fb4478bff3"><img src="https://img.shields.io/badge/fb4478bff3-fix-green" alt="fix - fb4478bff3" /></a></td> <td><strong>bottom-sheet:</strong> ensure animation event comes from container</td> </tr> <tr> <td><a href="e4f7f3498b"><img src="https://img.shields.io/badge/e4f7f3498b-fix-green" alt="fix - e4f7f3498b" /></a></td> <td><strong>chips:</strong> correct focus management on chip destruction (<a href="https://redirect.github.com/angular/components/issues/33329">#33329</a>)</td> </tr> <tr> <td><a href="766b7aceee"><img src="https://img.shields.io/badge/766b7aceee-fix-green" alt="fix - 766b7aceee" /></a></td> <td><strong>chips:</strong> wrong padding when chip only has edit icon (<a href="https://redirect.github.com/angular/components/issues/33407">#33407</a>)</td> </tr> <tr> <td><a href="ebca801ee5"><img src="https://img.shields.io/badge/ebca801ee5-fix-green" alt="fix - ebca801ee5" /></a></td> <td><strong>grid-list:</strong> always validate colspan</td> </tr> <tr> <td><a href="30942bcd36"><img src="https://img.shields.io/badge/30942bcd36-fix-green" alt="fix - 30942bcd36" /></a></td> <td><strong>stepper:</strong> validate animation durations</td> </tr> </tbody> </table> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="e8f3419060"><img src="https://img.shields.io/badge/e8f3419060-fix-green" alt="fix - e8f3419060" /></a></td> <td><strong>layout:</strong> avoid CSS injection attacks in media matcher</td> </tr> <tr> <td><a href="9dc2b2b2ed"><img src="https://img.shields.io/badge/9dc2b2b2ed-fix-green" alt="fix - 9dc2b2b2ed" /></a></td> <td><strong>platform:</strong> account for composedPath error during event replay (<a href="https://redirect.github.com/angular/components/issues/33409">#33409</a>)</td> </tr> </tbody> </table> <h3>multiple</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="2995797ded"><img src="https://img.shields.io/badge/2995797ded-fix-green" alt="fix - 2995797ded" /></a></td> <td>improve dark theme visibility in menu, overlay, and portal examples (<a href="https://redirect.github.com/angular/components/issues/33367">#33367</a>)</td> </tr> </tbody> </table> <h2>22.0.1</h2> <h3>youtube-player</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="d75a22d69d"><img src="https://img.shields.io/badge/d75a22d69-fix-green" alt="fix - d75a22d69" /></a></td> <td>avoid errors with clobbered variables</td> </tr> <tr> <td><a href="fe0a96ce67"><img src="https://img.shields.io/badge/fe0a96ce6-fix-green" alt="fix - fe0a96ce6" /></a></td> <td>validate ID before attaching them to placeholder</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="d7a8cb9633"><img src="https://img.shields.io/badge/d7a8cb963-fix-green" alt="fix - d7a8cb963" /></a></td> <td><strong>dialog:</strong> ignore clicks on aria-disabled close buttons (<a href="https://redirect.github.com/angular/components/issues/33373">#33373</a>)</td> </tr> <tr> <td><a href="bde3c7621d"><img src="https://img.shields.io/badge/bde3c7621-fix-green" alt="fix - bde3c7621" /></a></td> <td><strong>timepicker:</strong> do not allow intervals less than a second (<a href="https://redirect.github.com/angular/components/issues/33354">#33354</a>)</td> </tr> </tbody> </table> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="629aea4032"><img src="https://img.shields.io/badge/629aea403-fix-green" alt="fix - 629aea403" /></a></td> <td><strong>a11y:</strong> avoid prototype conflicts in id generator (<a href="https://redirect.github.com/angular/components/issues/33356">#33356</a>)</td> </tr> <tr> <td><a href="49aeb676cd"><img src="https://img.shields.io/badge/49aeb676c-fix-green" alt="fix - 49aeb676c" /></a></td> <td><strong>clipboard:</strong> avoid infinite attempt loop (<a href="https://redirect.github.com/angular/components/issues/33366">#33366</a>)</td> </tr> </tbody> </table> <h3>aria</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="7581b0592b"><img src="https://img.shields.io/badge/7581b0592-fix-green" alt="fix - 7581b0592" /></a></td> <td><strong>combobox:</strong> avoid error for synthetic events (<a href="https://redirect.github.com/angular/components/issues/33360">#33360</a>)</td> </tr> <tr> <td><a href="1c4706155d"><img src="https://img.shields.io/badge/1c4706155-fix-green" alt="fix - 1c4706155" /></a></td> <td><strong>combobox:</strong> prevent re-dispatching keyboard event on control target change (<a href="https://redirect.github.com/angular/components/issues/33362">#33362</a>)</td> </tr> <tr> <td><a href="96e9ce10c3"><img src="https://img.shields.io/badge/96e9ce10c-fix-green" alt="fix - 96e9ce10c" /></a></td> <td><strong>tree:</strong> recursive textDirection getter (<a href="https://redirect.github.com/angular/components/issues/33337">#33337</a>)</td> </tr> </tbody> </table> <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> </tbody> </table> </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/material's changelog</a>.</em></p> <blockquote> <h1>22.0.2 "plastic lion" (2026-06-17)</h1> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="e8f3419060">e8f3419060</a></td> <td>fix</td> <td><strong>layout:</strong> avoid CSS injection attacks in media matcher</td> </tr> <tr> <td><a href="9dc2b2b2ed">9dc2b2b2ed</a></td> <td>fix</td> <td><strong>platform:</strong> account for composedPath error during event replay (<a href="https://redirect.github.com/angular/components/pull/33409">#33409</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="fb4478bff3">fb4478bff3</a></td> <td>fix</td> <td><strong>bottom-sheet:</strong> ensure animation event comes from container</td> </tr> <tr> <td><a href="e4f7f3498b">e4f7f3498b</a></td> <td>fix</td> <td><strong>chips:</strong> correct focus management on chip destruction (<a href="https://redirect.github.com/angular/components/pull/33329">#33329</a>)</td> </tr> <tr> <td><a href="766b7aceee">766b7aceee</a></td> <td>fix</td> <td><strong>chips:</strong> wrong padding when chip only has edit icon (<a href="https://redirect.github.com/angular/components/pull/33407">#33407</a>)</td> </tr> <tr> <td><a href="ebca801ee5">ebca801ee5</a></td> <td>fix</td> <td><strong>grid-list:</strong> always validate colspan</td> </tr> <tr> <td><a href="30942bcd36">30942bcd36</a></td> <td>fix</td> <td><strong>stepper:</strong> validate animation durations</td> </tr> </tbody> </table> <h3>multiple</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="2995797ded">2995797ded</a></td> <td>fix</td> <td>improve dark theme visibility in menu, overlay, and portal examples (<a href="https://redirect.github.com/angular/components/pull/33367">#33367</a>)</td> </tr> </tbody> </table> <h1>22.1.0-next.0 "argon-pineapple" (2026-06-10)</h1> <p>No user facing changes in this release</p> <h1>22.0.1 "argon-apple" (2026-06-10)</h1> <h3>aria</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="7581b0592b">7581b0592</a></td> <td>fix</td> <td><strong>combobox:</strong> avoid error for synthetic events (<a href="https://redirect.github.com/angular/components/pull/33360">#33360</a>)</td> </tr> <tr> <td><a href="1c4706155d">1c4706155</a></td> <td>fix</td> <td><strong>combobox:</strong> prevent re-dispatching keyboard event on control target change (<a href="https://redirect.github.com/angular/components/pull/33362">#33362</a>)</td> </tr> <tr> <td><a href="96e9ce10c3">96e9ce10c</a></td> <td>fix</td> <td><strong>tree:</strong> recursive textDirection getter (<a href="https://redirect.github.com/angular/components/pull/33337">#33337</a>)</td> </tr> </tbody> </table> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="629aea4032">629aea403</a></td> <td>fix</td> <td><strong>a11y:</strong> avoid prototype conflicts in id generator (<a href="https://redirect.github.com/angular/components/pull/33356">#33356</a>)</td> </tr> <tr> <td><a href="49aeb676cd">49aeb676c</a></td> <td>fix</td> <td><strong>clipboard:</strong> avoid infinite attempt loop (<a href="https://redirect.github.com/angular/components/pull/33366">#33366</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="d7a8cb9633">d7a8cb963</a></td> <td>fix</td> <td><strong>dialog:</strong> ignore clicks on aria-disabled close buttons (<a href="https://redirect.github.com/angular/components/pull/33373">#33373</a>)</td> </tr> <tr> <td><a href="bde3c7621d">bde3c7621</a></td> <td>fix</td> <td><strong>timepicker:</strong> do not allow intervals less than a second (<a href="https://redirect.github.com/angular/components/pull/33354">#33354</a>)</td> </tr> </tbody> </table> <h3>youtube-player</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="d75a22d69d">d75a22d69</a></td> <td>fix</td> <td>avoid errors with clobbered variables</td> </tr> <tr> <td><a href="fe0a96ce67">fe0a96ce6</a></td> <td>fix</td> <td>validate ID before attaching them to placeholder</td> </tr> </tbody> </table> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="9b9d0ea000"><code>9b9d0ea</code></a> release: cut the v22.0.2 release</li> <li><a href="7b54e95382"><code>7b54e95</code></a> build: update cross-repo angular dependencies (<a href="https://redirect.github.com/angular/components/issues/33398">#33398</a>)</li> <li><a href="b77a829020"><code>b77a829</code></a> docs(google-maps): Document the behavior of using the clusterClick output in ...</li> <li><a href="605f20016e"><code>605f200</code></a> build: update pnpm to v10.34.3 (<a href="https://redirect.github.com/angular/components/issues/33392">#33392</a>)</li> <li><a href="030915030f"><code>0309150</code></a> build: lock file maintenance (<a href="https://redirect.github.com/angular/components/issues/33406">#33406</a>)</li> <li><a href="9dc2b2b2ed"><code>9dc2b2b</code></a> fix(cdk/platform): account for composedPath error during event replay (<a href="https://redirect.github.com/angular/components/issues/33409">#33409</a>)</li> <li><a href="766b7aceee"><code>766b7ac</code></a> fix(material/chips): wrong padding when chip only has edit icon (<a href="https://redirect.github.com/angular/components/issues/33407">#33407</a>)</li> <li><a href="f7170b985a"><code>f7170b9</code></a> build: fix build failure (<a href="https://redirect.github.com/angular/components/issues/33408">#33408</a>)</li> <li><a href="e4f7f3498b"><code>e4f7f34</code></a> fix(material/chips): correct focus management on chip destruction (<a href="https://redirect.github.com/angular/components/issues/33329">#33329</a>)</li> <li><a href="9ad7964f9b"><code>9ad7964</code></a> build: update review config (<a href="https://redirect.github.com/angular/components/issues/33394">#33394</a>)</li> <li>Additional commits viewable in <a href="https://github.com/angular/components/compare/v21.2.14...v22.0.2">compare view</a></li> </ul> </details> <br />
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.
Check the README.md of each example for more details on how to run it, and the
"Points of Interest" it may contain.
Community Contributions
Members of the community have graciously ported and contributed the following examples of Flutter Web embedding into other web frameworks:
| Author | Host Framework | Code |
|---|---|---|
| @p-mazhnik | React JS | p-mazhnik/flutter-embedding cra-flutter |
| @p-mazhnik | React Native | p-mazhnik/flutter-embedding expo-flutter |
(All contributions are welcome! Please, create an issue or open a PR to let us know how you've embedded a Flutter Web app with your favorite web framework (Vue? Svelte? Ember? Aurelia? jQuery? MooTools? Prototype?), so it can be added to the table above!)