|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<base href="/" />
|
|
|
|
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
|
|
|
|
|
<meta name="description" content="A Flutter Web Element embedding demo." />
|
|
|
|
|
|
|
|
|
|
<!-- iOS meta tags & icons -->
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
|
|
|
<meta name="apple-mobile-web-app-title" content="Flutter Element embedding" />
|
|
|
|
|
<link rel="apple-touch-icon" href="icons/Icon-192.png" />
|
|
|
|
|
<link rel="preload" as="image" href="icons/unsplash-x9WGMWwp1NM.png" />
|
|
|
|
|
|
|
|
|
|
<!-- Favicon -->
|
|
|
|
|
<link rel="icon" type="image/png" href="icons/favicon.png" />
|
|
|
|
|
|
|
|
|
|
<title>Element embedding</title>
|
|
|
|
|
<link rel="manifest" href="manifest.json" />
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<section class="contents">
|
|
|
|
|
<article>
|
|
|
|
|
<div id="flutter_target"></div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<aside id="demo_controls">
|
|
|
|
|
<h1>Element embedding</h1>
|
|
|
|
|
|
|
|
|
|
<fieldset id="fx">
|
|
|
|
|
<legend>Effects</legend>
|
|
|
|
|
<input value="Shadow" data-fx="shadow" type="button" class="fx" />
|
|
|
|
|
<input value="Mirror 🧪" data-fx="mirror" type="button" class="fx" />
|
|
|
|
|
<input value="Resize" data-fx="resize" type="button" class="fx align-top" />
|
|
|
|
|
<div class="tight">
|
|
|
|
|
<input value="Spin" data-fx="spin" type="button" class="fx" />
|
|
|
|
|
<input type="range" value="0" min="-180" max="180" list="markers" id="rotation" class="tight" />
|
|
|
|
|
<datalist id="markers">
|
|
|
|
|
<option value="-180"></option>
|
|
|
|
|
<option value="-135"></option>
|
|
|
|
|
<option value="-45"></option>
|
|
|
|
|
<option value="0"></option>
|
|
|
|
|
<option value="45"></option>
|
|
|
|
|
<option value="135"></option>
|
|
|
|
|
<option value="180"></option>
|
|
|
|
|
</datalist>
|
|
|
|
|
</div>
|
|
|
|
|
<input value="Device" data-fx="handheld" type="button" class="fx" />
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
<fieldset id="interop">
|
|
|
|
|
<legend>JS Interop</legend>
|
|
|
|
|
|
|
|
|
|
<label for="screen-selector">
|
|
|
|
|
Screen
|
|
|
|
|
<select name="screen-select" id="screen-selector" class="screen">
|
|
|
|
|
<option value="counter">Counter</option>
|
|
|
|
|
<option value="textField">TextField</option>
|
|
|
|
|
<option value="custom">Custom App</option>
|
|
|
|
|
</select>
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<label for="value">
|
|
|
|
|
Value
|
|
|
|
|
<input id="value" value="" type="text" readonly />
|
|
|
|
|
</label>
|
|
|
|
|
<input
|
|
|
|
|
id="increment"
|
|
|
|
|
value="Increment"
|
|
|
|
|
type="button"
|
|
|
|
|
/>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</aside>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
{{flutter_js}}
|
|
|
|
|
{{flutter_build_config}}
|
|
|
|
|
|
|
|
|
|
const target = document.getElementById('flutter_target');
|
|
|
|
|
_flutter.loader.load({
|
|
|
|
|
onEntrypointLoaded: async function (engineInitializer) {
|
|
|
|
|
const appRunner = await engineInitializer.initializeEngine({
|
|
|
|
|
hostElement: target,
|
|
|
|
|
});
|
|
|
|
|
await appRunner.runApp();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<script src="js/demo-js-interop.js" defer></script>
|
|
|
|
|
<script src="js/demo-css-fx.js" defer></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
