css Question posted in
Some basic documentation can be found here.

Css – Main Dart file is not loading Flutter web

I am creating flutter web app where i have define some loading splash screen by doing some html and css in index.html file you can see here:

<!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>

Here is my main.dart file code:

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,
      ),
    );
  }
}

The issue is when web app open the animation of index.html shows and then stuck there and main.dart file not shows the content

Previously i used other animations and it was working fine but I don’t know why now its not working even i tried by creating new project but same

Please Anyone to help me solve this issue, will be apperciated

Tags:

2

Answers


  1. 0

    You have to manually remove the animation, once the app is initialized and running.

    I’ll suggest to wrap the whole loading block with the related CSS inside a container, so once you remove the loader, all unnecessary CSS will be removed too.

    <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>
    Login or Signup to reply.
  2. 0

    I found the prblm

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

    in this you have made the container to cover whole screen and have given it the highest z-index to stay over top, so the flutter canvas is there below it, it is just covered by this container,

    try with width 50% and height 50% and you will see flutter canvas in remaining 50% screen, what you can do is remove the loader after
    await appRunner.runApp();
    like suggested in @Vladimir Gadzhov answer.

    or within the dart code using this fn like below

    import 'dart:html' as html;

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

    call this hideLoader() after runApp() in main() in main.dart file

    See how to show and remove loader in flutter documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search