fix index.html for flutter 3.22

narumincho · Jun 12, 2024 · 9131333 · 9131333
1 parent bf75bf5
commit 9131333
Showing 1 changed file with 59 additions and 25 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -17,8 +18,7 @@
   <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.">
+  <meta name="description" content="definy">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -27,33 +27,67 @@
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" href="favicon.png" />
 
   <title>definy</title>
   <link rel="manifest" href="manifest.json">
-
-  <script>
-    // The value below is injected by flutter build, do not touch.
-    const serviceWorkerVersion = null;
-  </script>
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
 </head>
+
 <body>
-  <script>
-    window.addEventListener('load', function(ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
-            appRunner.runApp();
-          });
+  <!-- Flutter が読み込まれるまでの読み込み表示 -->
+  <div id="flutterLoadingIndicatorContainer">
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        margin: 0;
+        height: 100%;
+        background-color: #fff;
+      }
+
+      #flutterLoadingIndicatorContainer {
+        height: 100vh;
+        display: grid;
+      }
+
+      #flutterLoadingIndicator {
+        width: 64px;
+        height: 64px;
+        background-color: #fff;
+        stroke: #000;
+        place-self: center;
+        animation: rotation 2s infinite linear;
+      }
+
+      @keyframes rotation {
+        from {
+          transform: rotate(0deg);
         }
-      });
-    });
-  </script>
+
+        to {
+          transform: rotate(359deg);
+        }
+      }
+
+      @media(prefers-color-scheme: dark) {
+        body {
+          background-color: #000;
+        }
+
+        #flutterLoadingIndicator {
+          background-color: #000;
+          stroke: #fff;
+        }
+      }
+    </style>
+
+    <svg id="flutterLoadingIndicator" viewBox="-100 -100 200 200">
+      <path d="M 78,45 a 90 90 30 1 1 0,-90" stroke-width="10" fill="none"></path>
+    </svg>
+  </div>
+  <script src="flutter_bootstrap.js" async></script>
 </body>
-</html>
+
+</html>