Основной файл Dart не загружает сеть Flutter

Я создаю веб-приложение Flutter, в котором я определил некоторый загрузочный экран, выполнив некоторые 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>

Вот мой код файла main.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,
      ),
    );
  }
}

Проблема в том, что когда веб-приложение открывает анимацию index.html, а затем застревает там, а файл main.dart не показывает содержимое.

Раньше я использовал другие анимации, и они работали нормально, но я не знаю, почему сейчас они не работают, даже я пытался создать новый проект, но то же самое.

Пожалуйста, все, кто поможет мне решить эту проблему, будут признательны.

css flutter

08.04.2024 14:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам придется вручную удалить анимацию после инициализации и запуска приложения.

Я предлагаю обернуть весь блок загрузки соответствующим CSS внутри контейнера, чтобы после удаления загрузчика весь ненужный CSS тоже был удален.

<body>
  <div id = "loading">
    <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>
    <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>
  </div>

  <script>
    window.addEventListener('load', function (ev) {
      let loading = document.querySelector('#loading');
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine();

          await appRunner.runApp();
          loading.remove(); // Remove the loading container
        }
      });
    });
  </script>
</body>

08.04.2024 14:54

Я нашел проблему

 .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;
      }

в этом случае вы сделали контейнер охватывающим весь экран и присвоили ему самый высокий z-индекс, чтобы он оставался сверху, поэтому флаттер-холст находится под ним, он просто покрыт этим контейнером,

попробуйте установить ширину 50% и высоту 50%, и вы увидите трепещущий холст на оставшихся 50% экрана. Что вы можете сделать, это удалить загрузчик после await appRunner.runApp(); как предложено в ответе @Vladimir Gadzhov.

или в коде дартса, используя эту клавишу, как показано ниже.

import 'dart:html' as html;

void hideLoader() {
  // Find the loader element and remove it
  final loaderElement = html.querySelector('#loader');
  loaderElement?.remove();
}

вызовите этот методideLoader() после runApp() в main() в файле main.dart

Посмотрите, как показать и удалить загрузчик, в документации Flutter

08.04.2024 15:08