mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
b869a51104
â ï¸ **Dependabot is rebasing this PR** â ï¸ Rebasing might not happen immediately, so don't worry if this takes some time. Note: if you make any changes to this PR yourself, they will take precedence over the rebase. --- Bumps [@angular/cdk](https://github.com/angular/components) from 18.2.14 to 19.0.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/angular/components/releases"><code>@âangular/cdk</code>'s releases</a>.</em></p> <blockquote> <h2>v19.0.0</h2> <h1>19.0.0 "hafnium-hippo" (2024-11-19)</h1> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="f4a02adb77"><img src="https://img.shields.io/badge/f4a02adb7-feat-blue" alt="feat - f4a02adb7" /></a></td> <td><strong>a11y:</strong> use native media query for high contrast detection (<a href="https://redirect.github.com/angular/components/issues/29678">#29678</a>)</td> </tr> <tr> <td><a href="9b4085c6e3"><img src="https://img.shields.io/badge/9b4085c6e-feat-blue" alt="feat - 9b4085c6e" /></a></td> <td><strong>private:</strong> create cdk-visually-hidden style loader (<a href="https://redirect.github.com/angular/components/issues/29757">#29757</a>)</td> </tr> <tr> <td><a href="df21d2b091"><img src="https://img.shields.io/badge/df21d2b09-fix-green" alt="fix - df21d2b09" /></a></td> <td><strong>overlay:</strong> avoid having to manually load structural styles</td> </tr> <tr> <td><a href="560878a231"><img src="https://img.shields.io/badge/560878a23-fix-green" alt="fix - 560878a23" /></a></td> <td><strong>overlay:</strong> load structural styles in a cascade layer (<a href="https://redirect.github.com/angular/components/issues/29725">#29725</a>)</td> </tr> <tr> <td><a href="873eb01e01"><img src="https://img.shields.io/badge/873eb01e0-fix-green" alt="fix - 873eb01e0" /></a></td> <td><strong>portal:</strong> remove ComponentFactoryResolver usages (<a href="https://redirect.github.com/angular/components/issues/27427">#27427</a>)</td> </tr> <tr> <td><a href="5439460d1f"><img src="https://img.shields.io/badge/5439460d1-fix-green" alt="fix - 5439460d1" /></a></td> <td><strong>scrolling:</strong> adds ngTemplateContextGuard (<a href="https://redirect.github.com/angular/components/issues/27276">#27276</a>)</td> </tr> <tr> <td><a href="ad18e6d74e"><img src="https://img.shields.io/badge/ad18e6d74-fix-green" alt="fix - ad18e6d74" /></a></td> <td><strong>text-field:</strong> avoid having to manually load text field styles</td> </tr> <tr> <td><a href="bd84c2a674"><img src="https://img.shields.io/badge/bd84c2a67-fix-green" alt="fix - bd84c2a67" /></a></td> <td><strong>tree:</strong> fix issue where <code>isExpanded</code> wouldn't be set if placed before <code>isExpandable</code> (<a href="https://redirect.github.com/angular/components/issues/29565">#29565</a>)</td> </tr> <tr> <td><a href="3b4ade5a0b"><img src="https://img.shields.io/badge/3b4ade5a0-fix-green" alt="fix - 3b4ade5a0" /></a></td> <td><strong>tree:</strong> only handle keyboard events directly from the node (<a href="https://redirect.github.com/angular/components/issues/29861">#29861</a>)</td> </tr> <tr> <td><a href="f6066c23fe"><img src="https://img.shields.io/badge/f6066c23f-fix-green" alt="fix - f6066c23f" /></a></td> <td><strong>tree:</strong> warn if mixed node types are used within the same tree</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="9122335b25"><img src="https://img.shields.io/badge/9122335b2-feat-blue" alt="feat - 9122335b2" /></a></td> <td><strong>checkbox:</strong> add new aria properties to MatCheckbox (<a href="https://redirect.github.com/angular/components/issues/29457">#29457</a>)</td> </tr> <tr> <td><a href="64ed7ca715"><img src="https://img.shields.io/badge/64ed7ca71-feat-blue" alt="feat - 64ed7ca71" /></a></td> <td><strong>core:</strong> add experimental theme demo (<a href="https://redirect.github.com/angular/components/issues/29636">#29636</a>)</td> </tr> <tr> <td><a href="a58e6f6711"><img src="https://img.shields.io/badge/a58e6f671-feat-blue" alt="feat - a58e6f671" /></a></td> <td><strong>core:</strong> add theme-overrides mixin (<a href="https://redirect.github.com/angular/components/issues/29858">#29858</a>)</td> </tr> <tr> <td><a href="d206225c58"><img src="https://img.shields.io/badge/d206225c5-feat-blue" alt="feat - d206225c5" /></a></td> <td><strong>core:</strong> create focus-indicator structural styles loader (<a href="https://redirect.github.com/angular/components/issues/29763">#29763</a>)</td> </tr> <tr> <td><a href="b519b4785b"><img src="https://img.shields.io/badge/b519b4785-feat-blue" alt="feat - b519b4785" /></a></td> <td><strong>core:</strong> default to color-scheme theme type (<a href="https://redirect.github.com/angular/components/issues/29907">#29907</a>)</td> </tr> <tr> <td><a href="ea0d1ba7b7"><img src="https://img.shields.io/badge/ea0d1ba7b-feat-blue" alt="feat - ea0d1ba7b" /></a></td> <td><strong>core:</strong> deprecate the core mixin (<a href="https://redirect.github.com/angular/components/issues/29906">#29906</a>)</td> </tr> <tr> <td><a href="4869909123"><img src="https://img.shields.io/badge/486990912-feat-blue" alt="feat - 486990912" /></a></td> <td><strong>core:</strong> rename theme mixin (<a href="https://redirect.github.com/angular/components/issues/29857">#29857</a>)</td> </tr> <tr> <td><a href="4b49d73542"><img src="https://img.shields.io/badge/4b49d7354-feat-blue" alt="feat - 4b49d7354" /></a></td> <td><strong>core:</strong> switch system prefix from sys to mat-sys (<a href="https://redirect.github.com/angular/components/issues/29908">#29908</a>)</td> </tr> <tr> <td><a href="1abb484aa7"><img src="https://img.shields.io/badge/1abb484aa-feat-blue" alt="feat - 1abb484aa" /></a></td> <td><strong>input:</strong> add the ability to interact with disabled inputs (<a href="https://redirect.github.com/angular/components/issues/29574">#29574</a>)</td> </tr> <tr> <td><a href="4adc3725dd"><img src="https://img.shields.io/badge/4adc3725d-feat-blue" alt="feat - 4adc3725d" /></a></td> <td><strong>schematics:</strong> create v19 core removal schematic (<a href="https://redirect.github.com/angular/components/issues/29768">#29768</a>)</td> </tr> <tr> <td><a href="9c3af284f8"><img src="https://img.shields.io/badge/9c3af284f-feat-blue" alt="feat - 9c3af284f" /></a></td> <td><strong>schematics:</strong> Switch custom theme schematic to use theme mixin instead of define-theme and add high contrast override mixins (<a href="https://redirect.github.com/angular/components/issues/29642">#29642</a>)</td> </tr> <tr> <td><a href="3fc1f9a1b0"><img src="https://img.shields.io/badge/3fc1f9a1b-feat-blue" alt="feat - 3fc1f9a1b" /></a></td> <td><strong>schematics:</strong> Update custom theme schematic to work with light-dark and use theme-overrides mixin (<a href="https://redirect.github.com/angular/components/issues/29911">#29911</a>)</td> </tr> <tr> <td><a href="ff3d342fd4"><img src="https://img.shields.io/badge/ff3d342fd-feat-blue" alt="feat - ff3d342fd" /></a></td> <td><strong>tabs:</strong> add <code>alignTabs</code> in <code>MatTabsConfig</code> (<a href="https://redirect.github.com/angular/components/issues/29779">#29779</a>)</td> </tr> <tr> <td><a href="371446a7cf"><img src="https://img.shields.io/badge/371446a7c-feat-blue" alt="feat - 371446a7c" /></a></td> <td><strong>theming:</strong> Disambiguate token names in theme overrides (<a href="https://redirect.github.com/angular/components/issues/29859">#29859</a>)</td> </tr> <tr> <td><a href="9546fe77ef"><img src="https://img.shields.io/badge/9546fe77e-feat-blue" alt="feat - 9546fe77e" /></a></td> <td><strong>timepicker:</strong> add test harnesses</td> </tr> <tr> <td><a href="2646e08851"><img src="https://img.shields.io/badge/2646e0885-feat-blue" alt="feat - 2646e0885" /></a></td> <td><strong>timepicker:</strong> add timepicker component</td> </tr> <tr> <td><a href="de6c20686c"><img src="https://img.shields.io/badge/de6c20686-fix-green" alt="fix - de6c20686" /></a></td> <td><strong>bottom-sheet:</strong> add <code>height</code> <code>minHeight</code> <code>maxHeight</code> to config (<a href="https://redirect.github.com/angular/components/issues/29794">#29794</a>)</td> </tr> <tr> <td><a href="fcb76d3ed1"><img src="https://img.shields.io/badge/fcb76d3ed-fix-green" alt="fix - fcb76d3ed" /></a></td> <td><strong>core:</strong> add missing system variables (<a href="https://redirect.github.com/angular/components/issues/29624">#29624</a>)</td> </tr> <tr> <td><a href="5ad133d073"><img src="https://img.shields.io/badge/5ad133d07-fix-green" alt="fix - 5ad133d07" /></a></td> <td><strong>core:</strong> allow optgroup overrides through core-overrides (<a href="https://redirect.github.com/angular/components/issues/29897">#29897</a>)</td> </tr> <tr> <td><a href="0fb4247ce8"><img src="https://img.shields.io/badge/0fb4247ce-fix-green" alt="fix - 0fb4247ce" /></a></td> <td><strong>core:</strong> avoid browser inconsistencies when parsing time</td> </tr> <tr> <td><a href="855ed49482"><img src="https://img.shields.io/badge/855ed4948-fix-green" alt="fix - 855ed4948" /></a></td> <td><strong>core:</strong> avoid having to manually load ripple styles</td> </tr> <tr> <td><a href="d0d59b784a"><img src="https://img.shields.io/badge/d0d59b784-fix-green" alt="fix - d0d59b784" /></a></td> <td><strong>core:</strong> change ng-add to use mat.theme (<a href="https://redirect.github.com/angular/components/issues/29990">#29990</a>)</td> </tr> <tr> <td><a href="a8e40ec341"><img src="https://img.shields.io/badge/a8e40ec34-fix-green" alt="fix - a8e40ec34" /></a></td> <td><strong>core:</strong> correctly identify color input (<a href="https://redirect.github.com/angular/components/issues/29909">#29909</a>)</td> </tr> <tr> <td><a href="edce90652a"><img src="https://img.shields.io/badge/edce90652-fix-green" alt="fix - edce90652" /></a></td> <td><strong>core:</strong> delete deprecated APIs (<a href="https://redirect.github.com/angular/components/issues/29651">#29651</a>)</td> </tr> <tr> <td><a href="54875a3258"><img src="https://img.shields.io/badge/54875a325-fix-green" alt="fix - 54875a325" /></a></td> <td><strong>core:</strong> drop sanity checks (<a href="https://redirect.github.com/angular/components/issues/29688">#29688</a>)</td> </tr> <tr> <td><a href="ef14c28698"><img src="https://img.shields.io/badge/ef14c2869-fix-green" alt="fix - ef14c2869" /></a></td> <td><strong>core:</strong> option showing double selected indicator in high contrast mode</td> </tr> <tr> <td><a href="5403b4b074"><img src="https://img.shields.io/badge/5403b4b07-fix-green" alt="fix - 5403b4b07" /></a></td> <td><strong>core:</strong> remove unused motion system vars (<a href="https://redirect.github.com/angular/components/issues/29920">#29920</a>)</td> </tr> <tr> <td><a href="613cf54063"><img src="https://img.shields.io/badge/613cf5406-fix-green" alt="fix - 613cf5406" /></a></td> <td><strong>core:</strong> rename sys vars from mat-app to mat-sys (<a href="https://redirect.github.com/angular/components/issues/29879">#29879</a>)</td> </tr> <tr> <td><a href="d0e178b75e"><img src="https://img.shields.io/badge/d0e178b75-fix-green" alt="fix - d0e178b75" /></a></td> <td><strong>core:</strong> stop manually instantiating MatRipple directive (<a href="https://redirect.github.com/angular/components/issues/29630">#29630</a>)</td> </tr> <tr> <td><a href="d55ec612cc"><img src="https://img.shields.io/badge/d55ec612c-fix-green" alt="fix - d55ec612c" /></a></td> <td><strong>core:</strong> update prebuilt themes to use mat.theme (<a href="https://redirect.github.com/angular/components/issues/29989">#29989</a>)</td> </tr> <tr> <td><a href="7cf8c6c464"><img src="https://img.shields.io/badge/7cf8c6c46-fix-green" alt="fix - 7cf8c6c46" /></a></td> <td><strong>datepicker:</strong> calendar font tokens not being picked up (<a href="https://redirect.github.com/angular/components/issues/29610">#29610</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"><code>@âangular/cdk</code>'s changelog</a>.</em></p> <blockquote> <h1>19.0.0 "hafnium-hippo" (2024-11-19)</h1> <h2>Breaking Changes</h2> <h3>cdk</h3> <ul> <li> <ul> <li>Since <code>cdk.high-contrast</code> targets a media query instead of a class, the specificity of the styles it emits is lower than before.</li> </ul> </li> <li> <ul> <li>The overlay stays are now loaded slightly later than before which can change their specificity. You may have to update any overlay style overrides.</li> </ul> </li> <li> <ul> <li> <p>Virtual scrolling lists now have proper type checking which can reveal some previously-hidden compilation errors.</p> </li> <li> <p>fix(cdk/scrolling): adds ngTemplateContextGuard</p> </li> </ul> <p>implements ngTemplateContextGuard for CdkVirtualForOf directive</p> </li> </ul> <h3>material</h3> <ul> <li> <ul> <li>The ripples styles are now loaded slightly later than before which can change their specificity. You may have to update any ripple style overrides.</li> </ul> </li> <li> <ul> <li><code>mixinColor</code> and <code>CanColor</code> have been removed. Use a host binding instead.</li> <li><code>mixinDisableRipple</code> and <code>CanDisableRipple</code> have been removed. Use input transforms instead.</li> <li><code>mixinDisabled</code> and <code>CanDisable</code> have been removed. Use input transforms instead.</li> <li><code>mixinInitialized</code> and <code>HasInitialized</code> have been removed. Use a <code>Subject</code> that emits in <code>ngOnInit</code> instead.</li> <li><code>mixinTabIndex</code> and <code>HasTabIndex</code> have been removed. Use input transforms instead.</li> </ul> </li> </ul> <h3>google-maps</h3> <ul> <li> <ul> <li>The new <code>@âgooglemaps/markerclusterer</code> API should be imported instead of the old one. Read more at: <a href="https://github.com/googlemaps/js-markerclusterer">https://github.com/googlemaps/js-markerclusterer</a></li> <li>The <code>MapMarkerClusterer</code> class has been renamed to <code>DeprecatedMapMarkerClusterer</code>.</li> <li>The <code>map-marker-clusterer</code> selector has been changed to <code>deprecated-map-marker-clusterer</code>.</li> </ul> </li> </ul> <h3>multiple</h3> <ul> <li> <ul> <li>In order for Material to be compatible with <a href="https://sass-lang.com/documentation/breaking-changes/mixed-decls/">recent changes in Sass</a> and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like <code>@include mat.button-theme($theme); --mat-button-color: red;</code>. It can be resolved by wrapping the overrides with <code>& {}</code>, for example <code>@include mat.button-theme($theme); & { --mat-button-color: red; }</code>.</li> </ul> </li> <li> <ul> <li><code>MatButton.ripple</code> is no longer available.</li> <li><code>MatCheckbox.ripple</code> is no longer available.</li> <li><code>MatChip.ripple</code> is no longer available.</li> </ul> </li> </ul> <h3>material-date-fns-adapter</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="234e5e0e8b">234e5e0e8</a></td> <td>feat</td> <td>add support for date-fns 4 (<a href="https://redirect.github.com/angular/components/pull/29744">#29744</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="09da06b42e">09da06b42</a></td> <td>fix</td> <td>ready event not emitting</td> </tr> <tr> <td><a href="2885987500">288598750</a></td> <td>fix</td> <td>startSeconds not applied when using placeholder</td> </tr> </tbody> </table> <h3>google-maps</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="1bd976c6a7">1bd976c6a</a></td> <td>feat</td> <td>Add support for some mouse events <a href="https://redirect.github.com/angular/components/pull/29741">#29741</a> (<a href="https://redirect.github.com/angular/components/pull/29747">#29747</a>)</td> </tr> <tr> <td><a href="a05475e769">a05475e76</a></td> <td>feat</td> <td>deprecate marker cluster component</td> </tr> <tr> <td><a href="c70aae15b0">c70aae15b</a></td> <td>feat</td> <td>implement new marker clusterer</td> </tr> <tr> <td><a href="b9deeee85b">b9deeee85</a></td> <td>fix</td> <td>add schematic to switch to the new clusterer name</td> </tr> <tr> <td><a href="a6709497fc">a6709497f</a></td> <td>fix</td> <td>expose all clusterer types (<a href="https://redirect.github.com/angular/components/pull/29905">#29905</a>)</td> </tr> <tr> <td><a href="74c2a081f9">74c2a081f</a></td> <td>fix</td> <td>resolve CLI errors in ng update schematic (<a href="https://redirect.github.com/angular/components/pull/29947">#29947</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="9122335b25">9122335b2</a></td> <td>feat</td> <td><strong>checkbox:</strong> add new aria properties to MatCheckbox (<a href="https://redirect.github.com/angular/components/pull/29457">#29457</a>)</td> </tr> <tr> <td><a href="64ed7ca715">64ed7ca71</a></td> <td>feat</td> <td><strong>core:</strong> add experimental theme demo (<a href="https://redirect.github.com/angular/components/pull/29636">#29636</a>)</td> </tr> <tr> <td><a href="a58e6f6711">a58e6f671</a></td> <td>feat</td> <td><strong>core:</strong> add theme-overrides mixin (<a href="https://redirect.github.com/angular/components/pull/29858">#29858</a>)</td> </tr> </tbody> </table> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="2f3cea1279"><code>2f3cea1</code></a> release: cut the v19.0.0 release</li> <li><a href="56834a28b0"><code>56834a2</code></a> build: update to v19 final (<a href="https://redirect.github.com/angular/components/issues/30045">#30045</a>)</li> <li><a href="734f296783"><code>734f296</code></a> docs: fix broken links (<a href="https://redirect.github.com/angular/components/issues/30038">#30038</a>)</li> <li><a href="370e6cc8e0"><code>370e6cc</code></a> release: cut the v19.0.0-rc.3 release</li> <li><a href="05c78afcd7"><code>05c78af</code></a> fix(cdk/table): run differ for all columns (<a href="https://redirect.github.com/angular/components/issues/30012">#30012</a>)</li> <li><a href="3a4158e077"><code>3a4158e</code></a> refactor(cdk/testing): fix out of sync file (<a href="https://redirect.github.com/angular/components/issues/30021">#30021</a>)</li> <li><a href="dbcb921d54"><code>dbcb921</code></a> fix(material/menu): handle keyboard events through dispatcher (<a href="https://redirect.github.com/angular/components/issues/29997">#29997</a>)</li> <li><a href="5345a875f6"><code>5345a87</code></a> fix(material/input): preserve aria-describedby set externally</li> <li><a href="5ba97925b6"><code>5ba9792</code></a> fix(material/form-field): avoid touching the DOM on each state change</li> <li><a href="13beab52bc"><code>13beab5</code></a> release: cut the v19.0.0-rc.2 release</li> <li>Additional commits viewable in <a href="https://github.com/angular/components/compare/18.2.14...19.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 merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@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>
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!)