我正在创建flutter Web应用程序，我已经定义了一些加载闪屏做一些html和css在index.html文件，你可以看到这里:
<!DOCTYPE html>
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description"
content="Welcome to RiftEdge Technologies - Breaking Boundaries, Bridging Realities. We specialize in web, mobile (native & hybrid), and WordPress backend development. Let's turn your ideas into digital reality! Contact us today.">
<!-- 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="RiftEdge Technologies">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>RiftEdge Technologies</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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
text-align: center;
}
.loader_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.avatar {
position: relative;
width: 150px;
height: 150px;
padding: 20px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: spin 1s infinite linear;
transform-origin: center;
border: 5px solid #4732D1;
border-top: 2px solid transparent;
border-radius: 50%;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
font-family: sans-serif;
font-size: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="loader_container" id="loader">
<div class="text-center">
<div class="avatar">
<img src="https://lh3.googleusercontent.com/u/0/drive-viewer/AKGpihbrGCo8gbE8bqvtQztXQHBXrpo0dOgaNk9Xhj8avGd6Y31MjEh8cdK1q0vCMSjdjpbH9XjKEgYw9mlfULDXN9WADhh3h186QA=w3760-h1074" alt="loader">
<div class="spinner"></div>
</div>
<h6 class="q-mt-md q-mb-xl loading-text">Loading...</h6>
</div>
</div>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: async function(engineInitializer) {
// Initialize the Flutter engine
let appRunner = await engineInitializer.initializeEngine();
// Run the app
await appRunner.runApp();
}
});
});
</script>
<!-- <script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: async function (engineInitializer) {
let appRunner = await engineInitializer.initializeEngine()
// await delay(2350);
await appRunner.runApp();
}
});
});
</script> -->
</body>
</html>
以下是我的主要. dart文件代码:
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'RiftEdge Technologies',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
).animate().fadeIn(duration: 400.milliseconds);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff0A0A0A),
appBar: AppBar(
backgroundColor: Colors.green,
),
);
}
}
问题是当Web应用程序打开index.html的动画显示，然后停留在那里和main. dart文件不显示内容
以前我用过其他动画，它的工作很好，但我不知道为什么现在它不工作，即使我try 创建新的项目，但相同
请任何人帮助我解决这个问题，将感谢