1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00
Files
samples/web_embedding
dependabot[bot] 5ff0642926 Bump @angular/material from 18.2.14 to 19.0.2 in /web_embedding/ng-flutter (#2547)
Bumps [@angular/material](https://github.com/angular/components) from 18.2.14 to 19.0.2.
<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>v19.0.2</h2>
<h1>19.0.2 &quot;plastic-rhino&quot; (2024-12-04)</h1>
<h3>youtube-player</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="1d3905a208"><img src="https://img.shields.io/badge/1d3905a208-fix-green" alt="fix - 1d3905a208" /></a></td>
<td>update to latest typings (<a href="https://redirect.github.com/angular/components/issues/30126">#30126</a>)</td>
</tr>
</tbody>
</table>
<h3>material</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="0ed9869529"><img src="https://img.shields.io/badge/0ed9869529-fix-green" alt="fix - 0ed9869529" /></a></td>
<td><strong>button-toggle:</strong> unable to tab into ngModel-based group on first render (<a href="https://redirect.github.com/angular/components/issues/30103">#30103</a>)</td>
</tr>
<tr>
<td><a href="72ff6fcce3"><img src="https://img.shields.io/badge/72ff6fcce3-fix-green" alt="fix - 72ff6fcce3" /></a></td>
<td><strong>core:</strong> optgroup label color not inferred correctly (<a href="https://redirect.github.com/angular/components/issues/30085">#30085</a>)</td>
</tr>
<tr>
<td><a href="c395585446"><img src="https://img.shields.io/badge/c395585446-fix-green" alt="fix - c395585446" /></a></td>
<td><strong>schematics:</strong> avoid parsing stylesheets that don't include Material</td>
</tr>
<tr>
<td><a href="5b3350a60e"><img src="https://img.shields.io/badge/5b3350a60e-fix-green" alt="fix - 5b3350a60e" /></a></td>
<td><strong>schematics:</strong> error if stylesheet contains syntax errors</td>
</tr>
<tr>
<td><a href="1235ad28bc"><img src="https://img.shields.io/badge/1235ad28bc-fix-green" alt="fix - 1235ad28bc" /></a></td>
<td><strong>sort:</strong> simplify animations (<a href="https://redirect.github.com/angular/components/issues/30057">#30057</a>)</td>
</tr>
<tr>
<td><a href="5b165067e8"><img src="https://img.shields.io/badge/5b165067e8-fix-green" alt="fix - 5b165067e8" /></a></td>
<td><strong>tabs:</strong> ink bar not showing when same tab is re-selected (<a href="https://redirect.github.com/angular/components/issues/30121">#30121</a>)</td>
</tr>
</tbody>
</table>
<h3>cdk</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="460f971b27"><img src="https://img.shields.io/badge/460f971b27-fix-green" alt="fix - 460f971b27" /></a></td>
<td><strong>accordion:</strong> improve accessibility in example code (<a href="https://redirect.github.com/angular/components/issues/30087">#30087</a>)</td>
</tr>
<tr>
<td><a href="6306a12c12"><img src="https://img.shields.io/badge/6306a12c12-fix-green" alt="fix - 6306a12c12" /></a></td>
<td><strong>menu:</strong> disable flexible dimensions (<a href="https://redirect.github.com/angular/components/issues/30086">#30086</a>)</td>
</tr>
</tbody>
</table>
<h2>v19.0.1</h2>
<h1>19.0.1 &quot;mercury-mailbox&quot; (2024-11-27)</h1>
<h3>material</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="2d7e078bb4"><img src="https://img.shields.io/badge/2d7e078bb-fix-green" alt="fix - 2d7e078bb" /></a></td>
<td><strong>button-toggle:</strong> animate checkbox (<a href="https://redirect.github.com/angular/components/issues/30025">#30025</a>)</td>
</tr>
<tr>
<td><a href="edac40645f"><img src="https://img.shields.io/badge/edac40645-fix-green" alt="fix - edac40645" /></a></td>
<td><strong>chips:</strong> emit state changes when chip grid is disabled (<a href="https://redirect.github.com/angular/components/issues/30033">#30033</a>)</td>
</tr>
<tr>
<td><a href="18f7f4bb9e"><img src="https://img.shields.io/badge/18f7f4bb9-fix-green" alt="fix - 18f7f4bb9" /></a></td>
<td><strong>datepicker:</strong> adds comparison ids and aria-describedby spans (<a href="https://redirect.github.com/angular/components/issues/30040">#30040</a>)</td>
</tr>
<tr>
<td><a href="375435497f"><img src="https://img.shields.io/badge/375435497-fix-green" alt="fix - 375435497" /></a></td>
<td><strong>slider:</strong> update documentation (<a href="https://redirect.github.com/angular/components/issues/30029">#30029</a>)</td>
</tr>
<tr>
<td><a href="a312014752"><img src="https://img.shields.io/badge/a31201475-fix-green" alt="fix - a31201475" /></a></td>
<td><strong>timepicker:</strong> make disabled input public (<a href="https://redirect.github.com/angular/components/issues/30063">#30063</a>)</td>
</tr>
</tbody>
</table>
<h3>docs</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="f9d9d2c811"><img src="https://img.shields.io/badge/f9d9d2c81-fix-green" alt="fix - f9d9d2c81" /></a></td>
<td>update errorState example to cover handle missing state (<a href="https://redirect.github.com/angular/components/issues/30059">#30059</a>)</td>
</tr>
</tbody>
</table>
<h3>multiple</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="59b7f436ac"><img src="https://img.shields.io/badge/59b7f436a-fix-green" alt="fix - 59b7f436a" /></a></td>
<td>use cross-compatible type for setTimeout (<a href="https://redirect.github.com/angular/components/issues/30073">#30073</a>)</td>
</tr>
</tbody>
</table>
<h2>v19.0.0</h2>
<h1>19.0.0 &quot;hafnium-hippo&quot; (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>
</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/material</code>'s changelog</a>.</em></p>
<blockquote>
<h1>19.0.2 &quot;plastic-rhino&quot; (2024-12-04)</h1>
<h3>cdk</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="460f971b27">460f971b27</a></td>
<td>fix</td>
<td><strong>accordion:</strong> improve accessibility in example code (<a href="https://redirect.github.com/angular/components/pull/30087">#30087</a>)</td>
</tr>
<tr>
<td><a href="6306a12c12">6306a12c12</a></td>
<td>fix</td>
<td><strong>menu:</strong> disable flexible dimensions (<a href="https://redirect.github.com/angular/components/pull/30086">#30086</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="0ed9869529">0ed9869529</a></td>
<td>fix</td>
<td><strong>button-toggle:</strong> unable to tab into ngModel-based group on first render (<a href="https://redirect.github.com/angular/components/pull/30103">#30103</a>)</td>
</tr>
<tr>
<td><a href="72ff6fcce3">72ff6fcce3</a></td>
<td>fix</td>
<td><strong>core:</strong> optgroup label color not inferred correctly (<a href="https://redirect.github.com/angular/components/pull/30085">#30085</a>)</td>
</tr>
<tr>
<td><a href="c395585446">c395585446</a></td>
<td>fix</td>
<td><strong>schematics:</strong> avoid parsing stylesheets that don't include Material</td>
</tr>
<tr>
<td><a href="5b3350a60e">5b3350a60e</a></td>
<td>fix</td>
<td><strong>schematics:</strong> error if stylesheet contains syntax errors</td>
</tr>
<tr>
<td><a href="1235ad28bc">1235ad28bc</a></td>
<td>fix</td>
<td><strong>sort:</strong> simplify animations (<a href="https://redirect.github.com/angular/components/pull/30057">#30057</a>)</td>
</tr>
<tr>
<td><a href="5b165067e8">5b165067e8</a></td>
<td>fix</td>
<td><strong>tabs:</strong> ink bar not showing when same tab is re-selected (<a href="https://redirect.github.com/angular/components/pull/30121">#30121</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="1d3905a208">1d3905a208</a></td>
<td>fix</td>
<td>update to latest typings (<a href="https://redirect.github.com/angular/components/pull/30126">#30126</a>)</td>
</tr>
</tbody>
</table>
<h1>19.1.0-next.0 &quot;hassium-ham&quot; (2024-11-27)</h1>
<h3>material</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="f47f5f9a1e">f47f5f9a1</a></td>
<td>feat</td>
<td><strong>schematics:</strong> Add CSS output to custom theme schematic (<a href="https://redirect.github.com/angular/components/pull/30004">#30004</a>)</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="3a7724e958">3a7724e95</a></td>
<td>fix</td>
<td>remove webkit-overflow-scrolling (<a href="https://redirect.github.com/angular/components/pull/30003">#30003</a>)</td>
</tr>
</tbody>
</table>
<h1>19.0.1 &quot;mercury-mailbox&quot; (2024-11-27)</h1>
<h3>material</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="2d7e078bb4">2d7e078bb</a></td>
<td>fix</td>
<td><strong>button-toggle:</strong> animate checkbox (<a href="https://redirect.github.com/angular/components/pull/30025">#30025</a>)</td>
</tr>
<tr>
<td><a href="edac40645f">edac40645</a></td>
<td>fix</td>
<td><strong>chips:</strong> emit state changes when chip grid is disabled (<a href="https://redirect.github.com/angular/components/pull/30033">#30033</a>)</td>
</tr>
<tr>
<td><a href="18f7f4bb9e">18f7f4bb9</a></td>
<td>fix</td>
<td><strong>datepicker:</strong> adds comparison ids and aria-describedby spans (<a href="https://redirect.github.com/angular/components/pull/30040">#30040</a>)</td>
</tr>
<tr>
<td><a href="375435497f">375435497</a></td>
<td>fix</td>
<td><strong>slider:</strong> update documentation (<a href="https://redirect.github.com/angular/components/pull/30029">#30029</a>)</td>
</tr>
<tr>
<td><a href="a312014752">a31201475</a></td>
<td>fix</td>
<td><strong>timepicker:</strong> make disabled input public (<a href="https://redirect.github.com/angular/components/pull/30063">#30063</a>)</td>
</tr>
</tbody>
</table>
<h3>docs</h3>
<table>
<thead>
<tr>
<th>Commit</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="f9d9d2c811">f9d9d2c81</a></td>
<td>fix</td>
<td>update errorState example to cover handle missing state (<a href="https://redirect.github.com/angular/components/pull/30059">#30059</a>)</td>
</tr>
</tbody>
</table>
<h3>multiple</h3>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="8f2b8f368d"><code>8f2b8f3</code></a> release: cut the v19.0.2 release</li>
<li><a href="5b165067e8"><code>5b16506</code></a> fix(material/tabs): ink bar not showing when same tab is re-selected (<a href="https://redirect.github.com/angular/components/issues/30121">#30121</a>)</li>
<li><a href="1d3905a208"><code>1d3905a</code></a> fix(youtube-player): update to latest typings (<a href="https://redirect.github.com/angular/components/issues/30126">#30126</a>)</li>
<li><a href="341bd14243"><code>341bd14</code></a> docs(material/tabs): remove duplicated tabs example (<a href="https://redirect.github.com/angular/components/issues/30109">#30109</a>)</li>
<li><a href="c395585446"><code>c395585</code></a> fix(material/schematics): avoid parsing stylesheets that don't include Material</li>
<li><a href="5b3350a60e"><code>5b3350a</code></a> fix(material/schematics): error if stylesheet contains syntax errors</li>
<li><a href="0ed9869529"><code>0ed9869</code></a> fix(material/button-toggle): unable to tab into ngModel-based group on first ...</li>
<li><a href="460f971b27"><code>460f971</code></a> fix(cdk/accordion): improve accessibility in example code (<a href="https://redirect.github.com/angular/components/issues/30087">#30087</a>)</li>
<li><a href="dfe4f2fd02"><code>dfe4f2f</code></a> docs(material/timepicker): fix missing icon in example (<a href="https://redirect.github.com/angular/components/issues/30096">#30096</a>)</li>
<li><a href="66e9093be2"><code>66e9093</code></a> docs(material/button): avoid clipping icon (<a href="https://redirect.github.com/angular/components/issues/30095">#30095</a>)</li>
<li>Additional commits viewable in <a href="https://github.com/angular/components/compare/18.2.14...19.0.2">compare view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@angular/material&package-manager=npm_and_yarn&previous-version=18.2.14&new-version=19.0.2)](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>
2024-12-09 06:34:40 +00:00
..

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!)