Skip to content

Instantly share code, notes, and snippets.

@AliAltiyev

AliAltiyev/flutter_bootstrap.js

Forked from bizz84/flutter_bootstrap.js
Created August 21, 2024 09:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AliAltiyev/ff6aed53c4ca59d4dae84fa9cd1c1de1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AliAltiyev/ff6aed53c4ca59d4dae84fa9cd1c1de1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @bizz84 bizz84 created this gist May 21, 2024.
    26 changes: 26 additions & 0 deletions flutter_bootstrap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    {{flutter_js}}
    {{flutter_build_config}}

    // Manipulate the DOM to add a loading spinner will be rendered with this HTML:
    // <div class="loading">
    // <div class="loader" />
    // </div>
    const loadingDiv = document.createElement('div');
    loadingDiv.className = "loading";
    document.body.appendChild(loadingDiv);
    const loaderDiv = document.createElement('div');
    loaderDiv.className = "loader";
    loadingDiv.appendChild(loaderDiv);

    // Customize the app initialization process
    _flutter.loader.load({
    onEntrypointLoaded: async function(engineInitializer) {
    const appRunner = await engineInitializer.initializeEngine();

    // Remove the loading spinner when the app runner is ready
    if (document.body.contains(loadingDiv)) {
    document.body.removeChild(loadingDiv);
    }
    await appRunner.runApp();
    }
    });
    70 changes: 70 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <!DOCTYPE html>
    <html>
    <head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.
    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.
    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
    -->
    <base href="$FLUTTER_BASE_HREF">

    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">

    <!-- 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="starter_architecture_flutter_firebase">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

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

    <!-- Custom CSS styling for the loading spinner -->
    <style>
    .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    .loader {
    /* border and border-top should match the app theme */
    border: 4px solid #FFFFFF;
    border-top: 4px solid #3F51B5;
    border-radius: 50%;
    /* similar size to CircularProgressIndicator */
    width: 35px;
    height: 35px;
    /* similar animation to CircularProgressIndicator */
    animation: spin 1s linear infinite;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    </style>
    </head>
    <body>
    <script src="flutter_bootstrap.js" async></script>
    </body>
    </html>