mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
a065a5003f
Bumps [@angular/material](https://github.com/angular/components) from 17.3.10 to 18.0.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/angular/components/releases"><code>@angular/material</code>'s releases</a>.</em></p> <blockquote> <h2>v18.0.0</h2> <p><!-- raw HTML omitted --><!-- raw HTML omitted --></p> <h1>18.0.0 "satin-sasquatch" (2024-05-22)</h1> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="d8a6c3edd8"><img src="https://img.shields.io/badge/d8a6c3edd-fix-green" alt="fix - d8a6c3edd" /></a></td> <td><strong>observers:</strong> don't observe content of comments (<a href="https://redirect.github.com/angular/components/issues/28858">#28858</a>)</td> </tr> <tr> <td><a href="81fe8f3227"><img src="https://img.shields.io/badge/81fe8f322-fix-green" alt="fix - 81fe8f322" /></a></td> <td><strong>observers:</strong> Run content changed callback in NgZone (<a href="https://redirect.github.com/angular/components/issues/28870">#28870</a>)</td> </tr> <tr> <td><a href="108cce33bf"><img src="https://img.shields.io/badge/108cce33b-fix-green" alt="fix - 108cce33b" /></a></td> <td><strong>overlay:</strong> Remove use of zone onStable to detach content (<a href="https://redirect.github.com/angular/components/issues/28740">#28740</a>)</td> </tr> <tr> <td><a href="d91d0d424b"><img src="https://img.shields.io/badge/d91d0d424-fix-green" alt="fix - d91d0d424" /></a></td> <td><strong>scrolling:</strong> fix virtual scrolling jankiness with run coalescing (<a href="https://redirect.github.com/angular/components/issues/28846">#28846</a>)</td> </tr> <tr> <td><a href="c8b62a1549"><img src="https://img.shields.io/badge/c8b62a154-fix-green" alt="fix - c8b62a154" /></a></td> <td><strong>scrolling:</strong> fix virtual scrolling jankiness with run coalescing (<a href="https://redirect.github.com/angular/components/issues/28968">#28968</a>)</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="4473a379f1"><img src="https://img.shields.io/badge/4473a379f-feat-blue" alt="feat - 4473a379f" /></a></td> <td><strong>core:</strong> add prebuilt themes based on M3</td> </tr> <tr> <td><a href="e2a45bf1e5"><img src="https://img.shields.io/badge/e2a45bf1e-feat-blue" alt="feat - e2a45bf1e" /></a></td> <td><strong>core:</strong> Allow namespacing ripple-loader event handler (<a href="https://redirect.github.com/angular/components/issues/28699">#28699</a>)</td> </tr> <tr> <td><a href="d679024dec"><img src="https://img.shields.io/badge/d679024de-feat-blue" alt="feat - d679024de" /></a></td> <td><strong>core:</strong> move Material 3 support into stable (<a href="https://redirect.github.com/angular/components/issues/28913">#28913</a>)</td> </tr> <tr> <td><a href="4ba4689dcd"><img src="https://img.shields.io/badge/4ba4689dc-feat-blue" alt="feat - 4ba4689dc" /></a></td> <td><strong>core:</strong> namespace m2-specific theming APIs (<a href="https://redirect.github.com/angular/components/issues/28892">#28892</a>)</td> </tr> <tr> <td><a href="295fd67fa8"><img src="https://img.shields.io/badge/295fd67fa-feat-blue" alt="feat - 295fd67fa" /></a></td> <td><strong>schematics:</strong> Add custom M3 theme schematic (<a href="https://redirect.github.com/angular/components/issues/28766">#28766</a>)</td> </tr> <tr> <td><a href="b312b9491e"><img src="https://img.shields.io/badge/b312b9491-feat-blue" alt="feat - b312b9491" /></a></td> <td><strong>schematics:</strong> use M3 themes in schematics</td> </tr> <tr> <td><a href="f8bd658df3"><img src="https://img.shields.io/badge/f8bd658df-feat-blue" alt="feat - f8bd658df" /></a></td> <td><strong>theming:</strong> add ability to use sys variables (<a href="https://redirect.github.com/angular/components/issues/28898">#28898</a>)</td> </tr> <tr> <td><a href="49901c6400"><img src="https://img.shields.io/badge/49901c640-fix-green" alt="fix - 49901c640" /></a></td> <td><strong>button-toggle:</strong> use radio pattern for single select Mat toggle button group (<a href="https://redirect.github.com/angular/components/issues/28548">#28548</a>)</td> </tr> <tr> <td><a href="5501d9b408"><img src="https://img.shields.io/badge/5501d9b40-fix-green" alt="fix - 5501d9b40" /></a></td> <td><strong>core:</strong> add migration for M2 theming APIs (<a href="https://redirect.github.com/angular/components/issues/28927">#28927</a>)</td> </tr> <tr> <td><a href="0ccc52830e"><img src="https://img.shields.io/badge/0ccc52830-fix-green" alt="fix - 0ccc52830" /></a></td> <td><strong>core:</strong> export all available M3 palettes (<a href="https://redirect.github.com/angular/components/issues/28975">#28975</a>)</td> </tr> <tr> <td><a href="a5ad288bff"><img src="https://img.shields.io/badge/a5ad288bf-fix-green" alt="fix - a5ad288bf" /></a></td> <td><strong>core:</strong> ripple loader not working in shadow DOM (<a href="https://redirect.github.com/angular/components/issues/29015">#29015</a>)</td> </tr> <tr> <td><a href="ec9e83db4c"><img src="https://img.shields.io/badge/ec9e83db4-fix-green" alt="fix - ec9e83db4" /></a></td> <td><strong>datepicker:</strong> resolve repeater warnings in calendar (<a href="https://redirect.github.com/angular/components/issues/29028">#29028</a>)</td> </tr> <tr> <td><a href="6dc8f7e90d"><img src="https://img.shields.io/badge/6dc8f7e90-fix-green" alt="fix - 6dc8f7e90" /></a></td> <td><strong>dialog:</strong> mark dialog content as scrollable (<a href="https://redirect.github.com/angular/components/issues/28963">#28963</a>)</td> </tr> <tr> <td><a href="ae82909a95"><img src="https://img.shields.io/badge/ae82909a9-fix-green" alt="fix - ae82909a9" /></a></td> <td><strong>schematics:</strong> Add css token renaming migration</td> </tr> <tr> <td><a href="3e9d3c3944"><img src="https://img.shields.io/badge/3e9d3c394-fix-green" alt="fix - 3e9d3c394" /></a></td> <td><strong>schematics:</strong> add option to generate system variables in M3 schematic</td> </tr> <tr> <td><a href="bdb17c6b34"><img src="https://img.shields.io/badge/bdb17c6b3-fix-green" alt="fix - bdb17c6b3" /></a></td> <td><strong>schematics:</strong> Change themeTypes to a single select instead of a multiselect prompt in M3 theme schematic (<a href="https://redirect.github.com/angular/components/issues/28997">#28997</a>)</td> </tr> <tr> <td><a href="c86359dd43"><img src="https://img.shields.io/badge/c86359dd4-fix-green" alt="fix - c86359dd4" /></a></td> <td><strong>slide-toggle:</strong> no outline when selected in high contrast mode (<a href="https://redirect.github.com/angular/components/issues/28979">#28979</a>)</td> </tr> <tr> <td><a href="d4e61e2330"><img src="https://img.shields.io/badge/d4e61e233-fix-green" alt="fix - d4e61e233" /></a></td> <td><strong>table:</strong> use ResizeObserver to react to size changes (<a href="https://redirect.github.com/angular/components/issues/28783">#28783</a>)</td> </tr> <tr> <td><a href="a4fc0a0970"><img src="https://img.shields.io/badge/a4fc0a097-fix-green" alt="fix - a4fc0a097" /></a></td> <td><strong>theming:</strong> remove shadow css variable (<a href="https://redirect.github.com/angular/components/issues/28953">#28953</a>)</td> </tr> <tr> <td><a href="0bb5610d03"><img src="https://img.shields.io/badge/0bb5610d0-fix-green" alt="fix - 0bb5610d0" /></a></td> <td><strong>theming:</strong> restrict css color usage behind a flag (<a href="https://redirect.github.com/angular/components/issues/28944">#28944</a>)</td> </tr> <tr> <td><a href="a332146ff5"><img src="https://img.shields.io/badge/a332146ff-perf-orange" alt="perf - a332146ff" /></a></td> <td><strong>core:</strong> speed up M3 compilation (<a href="https://redirect.github.com/angular/components/issues/29009">#29009</a>)</td> </tr> </tbody> </table> <h3>material-experimental</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="c345df7889"><img src="https://img.shields.io/badge/c345df788-feat-blue" alt="feat - c345df788" /></a></td> <td><strong>theming:</strong> add mixin for customizing checkbox tokens (<a href="https://redirect.github.com/angular/components/issues/28759">#28759</a>)</td> </tr> <tr> <td><a href="c932512bab"><img src="https://img.shields.io/badge/c932512ba-fix-green" alt="fix - c932512ba" /></a></td> <td><strong>theming:</strong> avoid re-emitting the same tokens from the backwards-compatibility styles</td> </tr> </tbody> </table> <h3>multiple</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="4719da2c34"><img src="https://img.shields.io/badge/4719da2c3-feat-blue" alt="feat - 4719da2c3" /></a></td> <td>token overrides api (<a href="https://redirect.github.com/angular/components/issues/28910">#28910</a>)</td> </tr> </tbody> </table> <h2>Breaking Changes</h2> <h3>material</h3> <ul> <li>The following APIs have been renamed. If you update using <code>ng update</code>, your app will be fixed automatically. <ul> <li><code>define-light-theme</code> to <code>m2-define-light-theme</code></li> <li><code>define-dark-theme</code> to <code>m2-define-dark-theme</code></li> <li><code>define-palette</code> to <code>m2-define-palette</code></li> </ul> </li> </ul> <!-- raw HTML omitted --> </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/material</code>'s changelog</a>.</em></p> <blockquote> <h1>18.0.0 "satin-sasquatch" (2024-05-22)</h1> <h2>Breaking Changes</h2> <h3>material</h3> <ul> <li>The following APIs have been renamed. If you update using <code>ng update</code>, your app will be fixed automatically. <ul> <li><code>define-light-theme</code> to <code>m2-define-light-theme</code></li> <li><code>define-dark-theme</code> to <code>m2-define-dark-theme</code></li> <li><code>define-palette</code> to <code>m2-define-palette</code></li> <li><code>get-contrast-color-from-palette</code> to <code>m2-get-contrast-color-from-palette</code></li> <li><code>get-color-from-palette</code> to <code>m2-get-color-from-palette</code></li> <li><code>get-color-config</code> to <code>m2-get-color-config</code></li> <li><code>get-typography-config</code> to <code>m2-get-typography-config</code></li> <li><code>get-density-config</code> to <code>m2-get-density-config</code></li> <li><code>$red-palette</code> to <code>$m2-red-palette</code></li> <li><code>$pink-palette</code> to <code>$m2-pink-palette</code></li> <li><code>$indigo-palette</code> to <code>$m2-indigo-palette</code></li> <li><code>$purple-palette</code> to <code>$m2-purple-palette</code></li> <li><code>$deep-purple-palette</code> to <code>$m2-deep-purple-palette</code></li> <li><code>$blue-palette</code> to <code>$m2-blue-palette</code></li> <li><code>$light-blue-palette</code> to <code>$m2-light-blue-palette</code></li> <li><code>$cyan-palette</code> to <code>$m2-cyan-palette</code></li> <li><code>$teal-palette</code> to <code>$m2-teal-palette</code></li> <li><code>$green-palette</code> to <code>$m2-green-palette</code></li> <li><code>$light-green-palette</code> to <code>$m2-light-green-palette</code></li> <li><code>$lime-palette</code> to <code>$m2-lime-palette</code></li> <li><code>$yellow-palette</code> to <code>$m2-yellow-palette</code></li> <li><code>$amber-palette</code> to <code>$m2-amber-palette</code></li> <li><code>$orange-palette</code> to <code>$m2-orange-palette</code></li> <li><code>$deep-orange-palette</code> to <code>$m2-deep-orange-palette</code></li> <li><code>$brown-palette</code> to <code>$m2-brown-palette</code></li> <li><code>$grey-palette</code> to <code>$m2-grey-palette</code></li> <li><code>$gray-palette</code> to <code>$m2-gray-palette</code></li> <li><code>$blue-grey-palette</code> to <code>$m2-blue-grey-palette</code></li> <li><code>$blue-gray-palette</code> to <code>$m2-blue-gray-palette</code></li> <li><code>$light-theme-background-palette</code> to <code>$m2-light-theme-background-palette</code></li> <li><code>$dark-theme-background-palette</code> to <code>$m2-dark-theme-background-palette</code></li> <li><code>$light-theme-foreground-palette</code> to <code>$m2-light-theme-foreground-palette</code></li> <li><code>$dark-theme-foreground-palette</code> to <code>$m2-dark-theme-foreground-palette</code></li> <li><code>define-typography-level</code> to <code>m2-define-typography-level</code></li> <li><code>define-rem-typography-config</code> to <code>m2-define-rem-typography-config</code></li> <li><code>define-typography-config</code> to <code>m2-define-typography-config</code></li> <li><code>define-legacy-typography-config</code> to <code>m2-define-legacy-typography-config</code></li> <li><code>typography-level</code> to <code>m2-typography-level</code></li> <li><code>font-size</code> to <code>m2-font-size</code></li> <li><code>line-height</code> to <code>m2-line-height</code></li> <li><code>font-weight</code> to <code>m2-font-weight</code></li> <li><code>letter-spacing</code> to <code>m2-letter-spacing</code></li> <li><code>font-family</code> to <code>m2-font-family</code></li> <li><code>font-shorthand</code> to <code>m2-font-shorthand</code></li> </ul> </li> </ul> <h3>material-experimental</h3> <p>| Commit | Type | Description |</p> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="d5df8ad63a"><code>d5df8ad</code></a> release: cut the v18.0.0 release</li> <li><a href="e2694b0313"><code>e2694b0</code></a> build: update to Angular v18 final (<a href="https://redirect.github.com/angular/components/issues/29097">#29097</a>)</li> <li><a href="452878e190"><code>452878e</code></a> release: cut the v18.0.0-rc.3 release</li> <li><a href="b5fb30a976"><code>b5fb30a</code></a> refactor(material/dialog): simplify structural styles (<a href="https://redirect.github.com/angular/components/issues/29068">#29068</a>)</li> <li><a href="d6146b98f5"><code>d6146b9</code></a> test(multiple): remove provideZoneChangeDetection for all menu tests (<a href="https://redirect.github.com/angular/components/issues/29061">#29061</a>)</li> <li><a href="6c1982b774"><code>6c1982b</code></a> docs: Make typography guide M3 specific (<a href="https://redirect.github.com/angular/components/issues/29075">#29075</a>)</li> <li><a href="8299b09122"><code>8299b09</code></a> fix(material/slider): resolve duplicate key warnings (<a href="https://redirect.github.com/angular/components/issues/29073">#29073</a>)</li> <li><a href="4f544eac00"><code>4f544ea</code></a> docs: Update theming your components guide for M3 and move M2 specific info (...</li> <li><a href="28eedd27e7"><code>28eedd2</code></a> docs(material/form-field): disable bubbling on prefix in example (<a href="https://redirect.github.com/angular/components/issues/29069">#29069</a>)</li> <li><a href="678819464d"><code>6788194</code></a> fixup! test(material/schematics): Add test for CSS token renames</li> <li>Additional commits viewable in <a href="https://github.com/angular/components/compare/17.3.10...18.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`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <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> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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!)