Gemfury

flet / flet-web python

Repository URL to install this package:
Details
flet-web / web / index.html
<!DOCTYPE html>
<html>

<head>
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Flet application.">

  <!-- iOS meta tags & icons -->
  <meta name="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="Flet">
  <link rel="apple-touch-icon" href="icons/apple-touch-icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png" />

  <title>Flet</title>
  <link rel="manifest" href="manifest.json">

  <script>
    var flet = {
      pyodide: false,
      multiView: false,
      noCdn: false,
      webSocketEndpoint: "/ws",
      assetBase: "/",
      routeUrlStrategy: "path",
      canvasKitBaseUrl: "/canvaskit/",
      pyodideUrl: "/pyodide/pyodide.js",
      webRenderer: "auto",
      fontFallbackBaseUrl: "assets/fonts/", // for Noto Emoji, use Google CDN
      appPackageUrl: "app.tar.gz"
    }

    flet.flutterAppLoaded = new Promise((resolve) => {
      flet.flutterAppResolve = resolve;
    });

    flet.flutterAppLoaded.then((flutterApp) => {
      console.log("Flutter app loaded");
      if (flet.multiView) {
        console.log(flutterApp.addView({
          hostElement: document.querySelector('#view-1'),
          initialData: {
            greeting: 'Hello, world!',
            randomValue: Math.floor(Math.random() * 100),
          },
          viewConstraints: {
            //maxWidth: Infinity,
            maxHeight: Infinity,
            minHeight: 300,
            minWidth: 620
          }
        }));
        console.log(flutterApp.addView({
          hostElement: document.querySelector('#view-2'),
          initialData: {
            bar: "baz"
          },
          viewConstraints: {
            minWidth: 620,
            //maxWidth: 320,
            //minHeight: 400,
            maxHeight: 400,
          }
        }));
      }
    });
  </script>

  <!-- fletAppConfig -->

  <script src="python.js"></script>
</head>

<body>
  <div id="loading">
    <style>
      body {
        inset: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        position: fixed;
      }

      #loading {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
      }

      #loading img {
        animation: 1s ease-in-out 0s infinite alternate breathe;
        opacity: .66;
        transition: opacity .4s;
      }

      #loading.main_done img {
        opacity: 1;
      }

      #loading.init_done img {
        animation: .33s ease-in-out 0s 1 forwards zooooom;
        opacity: .05;
      }

      @keyframes breathe {
        from {
          transform: scale(0.4);
          opacity: 1.0;
        }

        to {
          transform: scale(0.35);
          opacity: .7;
        }
      }

      @keyframes zooooom {
        from {
          transform: scale(0.4)
        }

        to {
          transform: scale(10)
        }
      }
    </style>
    <img src="icons/loading-animation.png" alt="Loading..." />
  </div>
  <script src="flutter_bootstrap.js" async></script>

  <h1>View 1</h1>
  <div id="view-1" style="display: flex; justify-content: center;"></div>
  <h1>View 2</h1>
  <div id="view-2"></div>
</body>
</html>
flet / flet-web python

Products

About

Resources

Contact Gemfury
